config: 🔧 新增样式文件(css/less/sass/postCss)处理

.prettierrc

@@ -1,5 +1,5 @@
 {
-    "trailingComma": "all",
+    "trailingComma": "none",
     "semi": true,
     "singleQuote": true,
     "jsxSingleQuote": true,

package.json

@@ -40,22 +40,32 @@
         "@babel/runtime-corejs3": "^7.20.13",
         "@types/react": "^18.0.27",
         "@types/react-dom": "^18.0.10",
+        "autoprefixer": "^10.4.13",
         "babel-loader": "8.2.2",
         "chalk": "4.1.2",
         "clean-webpack-plugin": "^4.0.0",
         "compression-webpack-plugin": "^10.0.0",
         "copy-webpack-plugin": "^11.0.0",
+        "css-loader": "^6.7.3",
         "css-minimizer-webpack-plugin": "^4.2.2",
         "detect-port-alt": "^1.1.6",
         "env-cmd": "^10.1.0",
         "error-overlay-webpack-plugin": "^1.1.1",
         "fork-ts-checker-webpack-plugin": "^7.3.0",
         "html-webpack-plugin": "^5.5.0",
         "ip": "^1.1.8",
+        "less": "^4.1.3",
+        "less-loader": "^11.1.0",
         "mini-css-extract-plugin": "^2.7.2",
+        "node-sass": "^8.0.0",
         "postcss-flexbugs-fixes": "^5.0.2",
+        "postcss-loader": "^7.0.2",
+        "postcss-normalize": "^10.0.1",
+        "postcss-preset-env": "^8.0.1",
         "preload-webpack-plugin": "^2.3.0",
         "prettier": "^2.8.3",
+        "sass-loader": "^13.2.0",
+        "style-loader": "^3.3.1",
         "terser-webpack-plugin": "^5.3.6",
         "typescript": "^4.9.4",
         "webpack": "^5.75.0",

src/App.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import '@/styles/index.scss';
 
 function App() {
-    return <div>React App</div>;
+    return <div className='app'>React App</div>;
 }
 
 export default App;

src/styles/index.scss

@@ -0,0 +1,11 @@
+#root {
+    .app {
+        height: 100vh;
+        background: #cccccc;
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+}

webpack/config/webpack.common.js

@@ -14,13 +14,10 @@ const cssLoaders = (importLoaders) => [
     {
         loader: 'css-loader',
         options: {
-            // modules: true,
-            sourceMap: isDevelopment,
-            importLoaders,
-        },
-    },
-    {
-        // loader: 'scoped-css-loader',
+            modules: false,
+            sourceMap: isDevelopment, // 开发环境开启
+            importLoaders
+        }
     },
     {
         loader: 'postcss-loader',
@@ -33,50 +30,50 @@ const cssLoaders = (importLoaders) => [
                         {
                             autoprefixer: {
                                 grid: true,
-                                flexbox: 'no-2009',
+                                flexbox: 'no-2009'
                             },
-                            stage: 3,
-                        },
-                    ],
-                ].filter(Boolean),
-            },
-        },
-    },
+                            stage: 3
+                        }
+                    ]
+                ].filter(Boolean)
+            }
+        }
+    }
 ];
 
 const config = {
     entry: {
-        app: paths.appIndex,
+        app: paths.appIndex
     },
     cache: {
         // 缓存,cache.type 设置为 'filesystem' 是会开放更多的可配置项。
         // 收集在反序列化期间分配的未使用的内存，, 仅当 cache.type 设置为 'filesystem' 时生效。这需要将数据复制到更小的缓冲区中，并有性能成本。
         type: 'filesystem',
         buildDependencies: {
             // 是一个针对构建的额外代码依赖的数组对象。webpack 将使用这些项和所有依赖项的哈希值来使文件系统缓存失效。
-            config: [__filename],
-        },
+            config: [__filename]
+        }
     },
     resolve: {
         extensions: ['.tsx', '.ts', '.js', '.json'],
         alias: {
             '@': paths.appSrc,
             mock: paths.appMock,
             Components: paths.appSrcComponents,
-            Utils: paths.appSrcUtils,
-        },
+            Utils: paths.appSrcUtils
+        }
     },
     module: {
         rules: [
             {
                 test: /\.(tsx?|js)$/,
                 loader: 'babel-loader', // 使用缓存
                 options: {cacheDirectory: true},
-                exclude: [/node_modules/, /(.|_)min\.js$/],
+                exclude: [/node_modules/, /(.|_)min\.js$/]
             },
             {
                 test: /\.css$/,
-                use: cssLoaders(1),
+                use: cssLoaders(1)
             },
             {
                 test: /\.less$/,
@@ -85,10 +82,10 @@ const config = {
                     {
                         loader: 'less-loader',
                         options: {
-                            sourceMap: isDevelopment,
-                        },
-                    },
-                ],
+                            sourceMap: isDevelopment
+                        }
+                    }
+                ]
             },
             {
                 test: /\.scss$/,
@@ -97,11 +94,10 @@ const config = {
                     {
                         loader: 'sass-loader',
                         options: {
-                            sourceMap: isDevelopment,
-                            additionalData: '@import "@/styles/variables.scss";', // TODO:
-                        },
-                    },
-                ],
+                            sourceMap: isDevelopment
+                        }
+                    }
+                ]
             },
             {
                 test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
@@ -123,21 +119,21 @@ const config = {
                             return true;
                         }
                         return false;
-                    },
-                },
+                    }
+                }
             },
             {
                 test: /\.(eot|svg|ttf|woff|woff2?)$/,
-                type: 'asset/resource',
-            },
-        ],
+                type: 'asset/resource'
+            }
+        ]
     },
     plugins: [
         new webpack.DefinePlugin(paths.appDefineVariable),
         new HtmlWebpackPlugin({
             template: paths.appHtml,
             cache: true,
-            env: process.env.ENV || '',
+            env: process.env.ENV || ''
         }),
         new CopyPlugin({
             patterns: [
@@ -149,25 +145,25 @@ const config = {
                     globOptions: {
                         dot: true,
                         gitignore: true,
-                        ignore: ['**/index.html'],
-                    },
-                },
-            ],
+                        ignore: ['**/index.html']
+                    }
+                }
+            ]
         }),
         new WebpackBar({
             name: isDevelopment ? 'RUNNING' : 'BUNDLING',
-            color: isDevelopment ? '#52c41a' : '#722ed1',
+            color: isDevelopment ? '#52c41a' : '#722ed1'
         }),
         new ForkTsCheckerWebpackPlugin({
             typescript: {
-                configFile: paths.appTsConfig,
-            },
-        }),
+                configFile: paths.appTsConfig
+            }
+        })
         // new PreloadWebpackPlugin({
         //     rel: 'prefetch', // 预加载
         //     include: ['book'],
         // }),
-    ],
+    ]
 };
 
 module.exports = config;