Migrate from kkt 4.x to 5.x

[jaywcjlove]

npm Dependency

Upgrade kkt to ^5.5.1

- "kkt": "^4.2.0",
+ "kkt": "^5.5.1",

Use @kkt/loader-less instead of the previous @kkt/plugin-less plugins.

- "@kkt/plugin-less": "^4.2.0",
+ "@kkt/loader-less": "^5.5.1",

Use @kkt/loader-scss instead of the previous @kkt/plugin-scss plugins.

- "@kkt/plugin-scss": "^1.2.0",
+ "@kkt/loader-scss": "^5.5.1",

Use @kkt/loader-stylus instead of the previous @kkt/plugin-stylus plugins.

- "@kkt/plugin-stylus": "^1.2.0",
+ "@kkt/loader-stylus": "^5.5.1",

Configuration

kkt@5x supports kktrc.js and kktrc.ts.

- module.exports = {
-   plugins: [
-     require.resolve('@kkt/plugin-less'),
-   ],
-   // Modify the webpack config
-   config: (conf, { env, raw, ...other }, webpack) => {
-     return conf;
-   },
- };

+ export const loaderOneOf = [
+   require.resolve('@kkt/loader-less')
+ ];
+ // Modify the webpack config
+ export default (conf) => {
+   return conf;
+ }

Modify package.json

{
+  "eslintConfig": {
+    "extends": "react-app"
+  },
  ....
}

Home Page

Add homepage to package.json

The step below is important!

Open your package.json and add a homepage field for your project:

"homepage": "https://myusername.github.io/my-app",

or for a GitHub user page:

"homepage": "https://myusername.github.io",

or for a custom domain page:

"homepage": "https://mywebsite.com",

KKT uses the homepage field to determine the root URL in the built HTML file.