模塊構建失敗（來自./node_modules/mini-css-extract-plugin/dist/loader.js）：ReferenceError：文檔未定義

Question

好的，所以基本上我們在部署之前使用 webpack 來捆綁我們的資源。 但是，現在我們還想通過 webpack 捆綁我們的 sass 文件，它是否簡化了我們的構建過程。它進展順利，但現在 bundle.js 太大而無法在生產中部署，所以我想拆分 bundle.js 和樣式文件。 我對插件和所有東西都不太了解，所以我搜索了一下，發現 mini-css-extract-plugin 可以讓我將樣式文件拆分為一個新文件。 因此，我根據 mini-css-extract-plugin 的文檔調整了 web-pack.config 文件，但出現了很多錯誤。 有人可以指導我拆分 styles 文件並從 bundle.js 中提取它嗎？

錯誤：

ERROR in ./node_modules/normalize.css/normalize.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ReferenceError: document is not defined
    at insertStyleElement (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:309:15)    at addStyle (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:424:13)
    at modulesToDom (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:297:18)      
    at module.exports.module.exports (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:455:25)
    at Object.<anonymous> (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:206:14)    at __webpack_require__ (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:21:30)    at D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:85:18
    at Object.<anonymous> (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:88:10) 
    at Module._compile (D:\ReactJs-Projects\Expensify-app\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at evalModuleCode (D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:61:10)
    at D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:166:21
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:343:11
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1414:32
    at eval (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)
    at D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:321:9
    at TaskRunner.run (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\TaskRunner.js:48:7)
    at TerserPlugin.optimizeFn (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:227:18)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:7:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1409:36
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1405:32
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at Compilation.seal (D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1342:27)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:675:18
 @ ./src/app.js 10:0-37

ERROR in ./node_modules/react-dates/lib/css/_datepicker.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ReferenceError: document is not defined
    at insertStyleElement (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:309:15)
    at addStyle (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:424:13)  
    at modulesToDom (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:297:18)
    at module.exports.module.exports (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:455:25)
    at Object.<anonymous> (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:206:14)
    at __webpack_require__ (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:21:30)
    at D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:85:18
    at Object.<anonymous> (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:88:10)
    at Module._compile (D:\ReactJs-Projects\Expensify-app\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at evalModuleCode (D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:61:10)
    at D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:166:21
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:343:11
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1414:32
    at eval (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)
    at D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:321:9
    at TaskRunner.run (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\TaskRunner.js:48:7)
    at TerserPlugin.optimizeFn (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:227:18)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:7:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1409:36
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1405:32
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at Compilation.seal (D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1342:27)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:675:18
 @ ./src/components/ExpenseForm.js 27:0-45
 @ ./src/components/AddExpensePage.js
 @ ./src/routers/AppRouter.js
 @ ./src/app.js

ERROR in ./src/styles/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ReferenceError: document is not defined
    at insertStyleElement (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:309:15)
    at addStyle (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:424:13)
    at modulesToDom (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:297:18)
    at module.exports.module.exports (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:455:25)       
    at Object.<anonymous> (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:206:14)
    at __webpack_require__ (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:21:30)
    at D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:85:18
    at Object.<anonymous> (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:88:10)
    at Module._compile (D:\ReactJs-Projects\Expensify-app\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at evalModuleCode (D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:61:10)
    at D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:166:21
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:343:11
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1414:32
    at eval (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)
    at D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:321:9
    at TaskRunner.run (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\TaskRunner.js:48:7)
    at TerserPlugin.optimizeFn (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:227:18)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:7:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1409:36
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1405:32
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at Compilation.seal (D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1342:27)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:675:18
 @ ./src/app.js 11:0-30

webpack.config.js：

const path = require("path");
//const ExtractTextPlugin = require("extract-text-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = env => {
    const isProduction = env === "production";
    //const CSSExtract = new ExtractTextPlugin("styles.css");

    console.log("env", env);
    return {
        entry: "./src/app.js",
        output: {
            path: path.join(__dirname, "public"),
            filename: "bundle.js",
        },
        module: {
            rules: [
                {
                    loader: "babel-loader",
                    test: /\.js$/,
                    exclude: /node_modules/,
                },
                {
                    test: /\.s?css$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                publicPath: path.join(__dirname, "public"),
                            },
                        },
                        "style-loader",
                        "css-loader", 
                        "sass-loader", 
                    ],
                },
            ],
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: "styles.css",
            }),
        ],
        // plugins: [CSSExtract],
        devtool: isProduction ? "source-map" : "cheap-module-eval-source-map", 

        devServer: {
            contentBase: path.join(__dirname, "public"),
            historyApiFallback: true,
        },
    };
};

package.json：

{
    "name": "expensify-app",
    "version": "1.0.0",
    "main": "index.js",
    "author": "Viral Thaker",
    "license": "MIT",
    "scripts": {
        "serve": "live-server public/",
        "build:dev": "webpack",
        "build:prod": "webpack -p --env production",
        "dev-server": "webpack-dev-server",
        "start": "npm run dev-server",
        "test": "jest"
    },
    "dependencies": {
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.3",
        "babel-loader": "^8.1.0",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-plugin-transform-object-rest-spread": "^6.26.0",
        "css-loader": "^4.0.0",
        "jest": "^26.4.1",
        "live-server": "^1.2.1",
        "moment": "^2.27.0",
        "node-sass": "^4.14.1",
        "normalize.css": "^8.0.1",
        "react": "^16.13.1",
        "react-addons-shallow-compare": "^15.6.2",
        "react-dates": "^21.8.0",
        "react-dom": "^16.13.1",
        "react-modal": "^3.11.2",
        "react-redux": "^7.2.1",
        "react-router-dom": "^5.2.0",
        "redux": "^4.0.5",
        "sass-loader": "^6.0.6",
        "style-loader": "^1.2.1",
        "uuid": "^8.3.0",
        "validator": "^13.1.1"
    },
    "devDependencies": {
        "@babel/core": "^7.10.5",
        "@babel/preset-env": "^7.10.4",
        "@babel/preset-react": "^7.10.4",
        "extract-text-webpack-plugin": "^4.0.0-beta.0",
        "mini-css-extract-plugin": "^0.10.0",
        "webpack": "^4.44.1",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0"
    }
}

Answer 1

好吧，沒關系，因為 Camilo 建議有這個“stye-loader”，它與插件有某種沖突，但無論如何，當我分離 CSS 文件時，我不需要內聯 CSS 所以我將它從加載器中完全刪除，錯誤完全消失了它給了我一個帶有單獨 CSS 文件的新版本

任何人，將來遇到同樣的問題，只需尋找您的裝載機是否沖突

Answer 2

我的基於 angular 的項目遇到了這樣的問題，我執行了以下步驟並且已修復：

1. 重新安裝 angular-cli
2. 刪除 node_modules 文件夾，並安裝它（npm install）

Answer 3

只需替換 webpack.mix.js 中的以下內容

   mix.js('resources/js/app.js', 'public/js')
   .sass('resources/css/app.css', 'public/css')
   .sourceMaps();

至

    mix.js('resources/js/app.js', 'public/js')
       .sass('resources/sass/app.scss', 'public/css');

Answer 4

當我嘗試在 src 文件夾下添加 fonts 時，我在 Gatsby 上遇到了完全相同的錯誤。 警報的原因源於我不正確的導入路徑。 我已將“..”附加到主 CSS 文件中的路徑，這是多余的 - 它是從公共文件夾中讀取的。 因此，我相信檢查導入路徑可能表明錯誤代碼。

Answer 5

試試下面的cli命令

npm-install 

它對我有用。