antd主题修改热更新

Author: empty916

.babelrc.js

@@ -1,24 +1,4 @@
 module.exports = {
-	presets: [
-		[
-			"next/babel",
-			{
-				"styled-jsx": {
-					plugins: [
-            "styled-jsx-plugin-sass",
-            "styled-jsx-plugin-postcss"
-          ],
-				},
-			},
-		],
-	],
-	plugins: [
-		["@babel/plugin-proposal-decorators", { legacy: true }],
-		// [
-		// 	"styled-jsx/babel",
-		// 	{
-		// 		optimizeForSpeed: true,
-		// 	},
-		// ],
-	],
+	presets: [["next/babel"]],
+	plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]],
 };

.gitignore

@@ -32,3 +32,4 @@ yarn-error.log*
 
 # vercel
 .vercel
+/scripts/generated-theme.less

.npmrc

@@ -1,8 +1,8 @@
-sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
+# sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
 registry=https://registry.npm.taobao.org
-sharp_dist_base_url=https://npm.taobao.org/mirrors/sharp-libvips/
-electron_mirror=https://npm.taobao.org/mirrors/electron/
-phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
-sentrycli_cdnurl=https://npm.taobao.org/mirrors/sentry-cli/
-sqlite3_binary_site=https://npm.taobao.org/mirrors/sqlite3/
-python_mirror=https://npm.taobao.org/mirrors/python/
+# sharp_dist_base_url=https://npm.taobao.org/mirrors/sharp-libvips/
+# electron_mirror=https://npm.taobao.org/mirrors/electron/
+# phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
+# sentrycli_cdnurl=https://npm.taobao.org/mirrors/sentry-cli/
+# sqlite3_binary_site=https://npm.taobao.org/mirrors/sqlite3/
+# python_mirror=https://npm.taobao.org/mirrors/python/

README.md

@@ -13,6 +13,8 @@ yarn dev
 yarn build
 // 部署，启动node服务， 建议通过pm2启动
 yarn start
+
+// 打开网页http://localhost:3000/
 ```
 
 ## 目录结构
@@ -38,8 +40,6 @@ yarn start
 ## antd主题配置
 
 1. 修改./theme/antd-theme-var.less文件，添加你需要修改的主题色
-2. 运行命令```yarn gt```，完成主题修改(此命令会自动生成一份antd.css并覆盖node_modules/antd下的css文件)
-3. 不支持热更新
 
 
 ## 关于接口请求

next.config.js

@@ -1,7 +1,8 @@
-
+require('./scripts/plugins/watch-antd-theme');
 
 const isProd = process.env.NODE_ENV === 'production'
 
+
 module.exports = (phase) => {
   return {
     // Use the CDN in production and localhost for development.

package.json

@@ -5,9 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "gt": "generate-theme './theme/antd-theme-var.less' './theme/antd.css' && cp ./theme/antd.css ./node_modules/antd/dist/",
-    "postinstall": "npm run gt"
+    "start": "next start"
   },
   "dependencies": {
     "antd": "^4.9.4",
@@ -28,8 +26,10 @@
     "@emeks/antd-custom-theme-generator": "^0.1.6",
     "@types/node": "^14.14.16",
     "@types/react": "^17.0.0",
+    "chokidar": "^3.4.3",
     "eslint": "^7.16.0",
-    "less": "^4.0.0",
+    "less": "3.11.3",
+    "rimraf": "^3.0.2",
     "sass": "^1.30.0",
     "typescript": "^4.1.3"
   }

postcss.config.js

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+const { exec } = require("child_process");
+const path = require("path");
+const rimraf = require('rimraf');
+
+const cwd = process.cwd();
+
+const scriptVariables = {
+	customThemeFilePath: path.join(cwd, "./theme/antd-theme-var.less"),
+	generatedThemeFilePath: path.join(cwd, "./node_modules/antd/dist/antd.css"),
+	antdLibraryPath: path.join(cwd, "./node_modules/antd"),
+	theme: "default",
+};
+
+const content = `
+  @import url("${scriptVariables.antdLibraryPath}/lib/style/themes/${scriptVariables.theme}.less");
+  @import url("${scriptVariables.antdLibraryPath}/dist/antd.less");
+  @import url("${scriptVariables.customThemeFilePath}");
+`;
+
+const generatedThemePath = './scripts/generated-theme.less';
+
+module.exports = () => {
+    exec(
+        `echo "${content}" > ${generatedThemePath}`,
+        { cwd },
+        (error1, stdout, stderr) => {
+            if (!error1) {
+                exec(
+                    `node_modules/less/bin/lessc --js ${generatedThemePath} ${scriptVariables.generatedThemeFilePath}`,
+                    { cwd },
+                    (error2, stdout, stderr) => {
+                        if (!error2) {
+                            if (process.env.NODE_ENV !== 'development') {
+                                rimraf.sync(generatedThemePath);
+                            }
+                        } else {
+                            console.error('生成antd.css错误: ', error2);
+                        }
+                    }
+                );
+            } else {
+                console.error(error1);
+            }
+        }
+    );
+}
+

scripts/generate-theme.js

@@ -0,0 +1,10 @@
+const chokidar = require('chokidar');
+const path = require('path');
+const gt = require('../generate-theme');
+
+if (process.env.NODE_ENV === 'development') {
+    chokidar.watch(path.resolve('./theme/antd-theme-var.less'))
+        .on('all', gt);
+} else {
+    gt();
+}

scripts/plugins/watch-antd-theme.js

@@ -88,8 +88,6 @@ const initServerData = (global as any)?.__NEXT_DATA__?.props?.pageProps || {};
 
 const lsData = isBrowser ? (getData() || {}) : {};
 
-console.log(lsData)
-
 const store = initStore({
     ...lsData,
     ...initServerData,

store/index.ts

@@ -1 +1 @@
-@primary-color: orange;
+@primary-color: orange;