chore: 调整snowpack, 使其node_module引入的less文件支持编译参数

moonrailgun · moonrailgun · commit 8c39dd9fbcf7 · 2020-10-27T11:15:00.000+08:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -165,6 +165,7 @@
     "@prettier/plugin-xml": "^0.10.0",
     "@sentry/webpack-plugin": "^1.13.0",
     "@snowpack/plugin-react-refresh": "^2.3.2",
+    "@snowpack/plugin-run-script": "^2.1.7",
     "@snowpack/plugin-sass": "^1.0.1",
     "@snowpack/plugin-typescript": "^1.0.1",
     "@types/classnames": "^2.2.10",
diff --git a/public/index.html b/public/index.html
@@ -6,23 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Web site created using create-snowpack-app" />
     <title>Snowpack App</title>
+    <link rel="stylesheet" type="text/css" href="/.snowpack/antd.css" />
   </head>
   <body>
     <div id="root">
       <div id="app"></div>
     </div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <script type="module">import "antd/dist/antd.css";</script>
     <script type="module" src="/_dist_/web/index.js"></script>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/snowpack.config.js b/snowpack.config.js
@@ -28,11 +28,37 @@ const tsAlias = _(tspathMountMapping)
 //     .filter(_.isArray)
 // );
 
+// ant design 相关
+// Copy from Client/build/config/webpack.base.config.js
+const modifyVars = _.toPairs({
+  'primary-color': '#8C6244',
+  'error-color': '#e44a4c',
+  'text-selection-bg': '#1890ff',
+})
+  .map(([key, value]) => `--modify-var="${key}=${value}"`)
+  .join(' ');
+const antdLessCompile = `${path.resolve(
+  __dirname,
+  './node_modules/.bin/lessc'
+)} ${path.resolve(
+  __dirname,
+  './node_modules/antd/dist/antd.less'
+)} ${path.resolve(
+  __dirname,
+  './public/.snowpack/antd.css'
+)} --js ${modifyVars}`;
+const antdDarkLessCompile = `${path.resolve(
+  __dirname,
+  './node_modules/.bin/lessc'
+)} ${path.resolve(
+  __dirname,
+  './node_modules/antd/dist/antd.dark.less'
+)} ${path.resolve(
+  __dirname,
+  './public/.snowpack/antd.dark.css'
+)} --js ${modifyVars}`;
+
 module.exports = {
-  // extends: '@snowpack/app-scripts-react',
-  install: [
-    'antd/dist/antd.dark.css'
-  ],
   exclude: [
     '**/node_modules/**/*',
     '**/__tests__/*',
@@ -55,6 +81,8 @@ module.exports = {
     '@src': './src/',
   },
   plugins: [
+    ['@snowpack/plugin-run-script', { name: 'antd compile', cmd: antdLessCompile }],
+    ['@snowpack/plugin-run-script', { name: 'antd dark mode compile', cmd: antdDarkLessCompile }],
     '@snowpack/plugin-typescript',
     '@snowpack/plugin-sass',
     'snowpack-plugin-less',
@@ -86,17 +114,15 @@ module.exports = {
             })};`,
           },
 
-          // 这里是临时解决方案
-          // https://github.com/snowpackjs/snowpack/discussions/1360
           {
             from: 'import "antd/dist/antd.dark.less";',
-            to: 'import "antd/dist/antd.dark.css";',
+            to: 'import "/.snowpack/antd.dark.css"',
           },
           {
             file: require.resolve('./src/web/assets/css/iconfont.css'),
             from: /\.\.\/fonts\/iconfont/g,
             to: '/fonts/iconfont',
-          }
+          },
         ],
       },
     ],
@@ -111,6 +137,6 @@ module.exports = {
     port: 8089,
     out: '.snowpack',
     output: 'stream',
-    hmrErrorOverlay: false
+    hmrErrorOverlay: false,
   },
 };
