生产环境样式问题

yaklang · Jan 9, 2024 · 650c88d · 650c88d
1 parent c4807be
commit 650c88d
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git a/app/renderer/src/main/config-overrides.js b/app/renderer/src/main/config-overrides.js
@@ -15,6 +15,9 @@ const ProgressBarPlugin = require('progress-bar-webpack-plugin'); // 打包进
 const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin")
 const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const devMode = process.env.NODE_ENV !== 'production';
 
 const OUTPUT_PATH = path.resolve(__dirname, "..", "..", "pages", "main")
 
@@ -40,22 +43,26 @@ module.exports = {
             }
         )),
         addWebpackPlugin(new NodePolyfillPlugin()),
+        addWebpackPlugin(new MiniCssExtractPlugin({
+            filename: '[name].css',
+            chunkFilename: '[id].css'
+        })),
         addWebpackModuleRule(
             {
                 test: [/\.css$/, /\.scss$/], // 可以打包后缀为scss/css的文件
                 exclude: [/\.module\.(css|scss)/],
                 use: [
-                    "style-loader",
+                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                     "css-loader",
                     "sass-loader"
                 ]
             },
             {
                 test: /\.module\.(css|scss)/,
                 use: [
+                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                     "style-loader",
                     {
-
                         loader: "css-loader",
                         options: {
                             modules: {
@@ -67,11 +74,11 @@ module.exports = {
                 ]
             }
         ),
-        // fixBabelImports('import', {
-        //     libraryName: 'antd',
-        //     libraryDirectory: 'es',
-        //     style: 'css'
-        // }),
+        fixBabelImports('import', {
+            libraryName: 'antd',
+            libraryDirectory: 'es',
+            style: 'css'
+        }),
         addWebpackExternals(
             { "./cptable": "var cptable" },
         ),

diff --git a/app/renderer/src/main/package.json b/app/renderer/src/main/package.json
@@ -129,6 +129,7 @@
     "devDependencies": {
         "babel-plugin-import": "^1.13.8",
         "env-cmd": "^10.1.0",
+        "mini-css-extract-plugin": "^2.7.6",
         "node-polyfill-webpack-plugin": "^3.0.0",
         "postcss-normalize": "^10.0.1",
         "progress-bar-webpack-plugin": "^2.1.0",

diff --git a/app/renderer/src/main/src/index.css b/app/renderer/src/main/src/index.css
@@ -1,4 +1,4 @@
-/* @import "~antd/dist/antd.css"; */
+@import "~antd/dist/antd.css";
 
 body {
     overflow-x: hidden;

diff --git a/app/renderer/src/main/yarn.lock b/app/renderer/src/main/yarn.lock
@@ -11040,7 +11040,7 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-mini-css-extract-plugin@^2.4.5:
+mini-css-extract-plugin@^2.4.5, mini-css-extract-plugin@^2.7.6:
   version "2.7.6"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz#282a3d38863fddcd2e0c220aaed5b90bc156564d"
   integrity sha512-Qk7HcgaPkGG6eD77mLvZS1nmxlao3j+9PkrT9Uc7HAE1id3F41+DdBRYRYkbyfNRGzm8/YWtzhw7nVPmwhqTQw==