MiniCSSExtractPlugin - 模块解析失败。 SCSS 编译期间出现意外字符“”

Question

好吧，我不知道为什么会出现这个错误，因为当我尝试在测试环境中配置它时一切正常，但是当我将它移到开发环境并更改路径时，我收到关于意外字符“”的错误：

ERROR in ./Pages/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
    at handleParseError (C:\Users\...\node_modules\webpack\lib\NormalModule.js:804:19)
    at C:\Users\...\node_modules\webpack\lib\NormalModule.js:905:5
    at processResult (C:\Users\...\node_modules\webpack\lib\NormalModule.js:640:11)
    at C:\Users\...\node_modules\webpack\lib\NormalModule.js:692:5
r-runner\lib\LoaderRunner.js:406:3
    at iterateNormalLoaders (C:\Users\...\node_modules\loader-runner\lib\LoaderRunner.js:232:10)
r-runner\lib\LoaderRunner.js:406:3
    at iterateNormalLoaders (C:\Users\..\node_modules\loader-runner\lib\LoaderRunner.js:232:10)
    at Array.<anonymous> (C:\Users\...\node_modules\loader-runner\lib\LoaderRunner.js:223:4)
    at runCallbacks (C:\Users\...\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:27:15)
    at C:\Users\...\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:200:4
    at C:\Users\...\node_modules\graceful-fs\graceful-fs.js:123:16
 @ ./Pages/app.ts 2:0-22

但正如我所说，在具有相同路径的测试环境中，一切运行良好：/ 来自我的packages.json 的依赖项和 DevDependencies：

"devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.0.1",
    "cssnano": "^4.1.10",
    "mini-css-extract-plugin": "^1.3.5",
    "node-sass": "^5.0.0",
    "postcss-loader": "^4.2.0",
    "postcss-preset-env": "^6.7.0",
    "sass": "^1.32.5",
    "sass-loader": "^10.1.1",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.1.1",
    "ts-loader": "^8.0.12",
    "typescript": "^4.1.3",
    "webpack": "^5.19.0",
    "webpack-cli": "^4.4.0"
  },
"dependencies": {
    "class-validator": "^0.13.1",
    "muuri": "^0.9.3",
    "web-animations-js": "^2.3.2"
},

还有我的webpack.config.js：

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const postcssPresetEnv = require("postcss-preset-env");
const TerserPlugin = require("terser-webpack-plugin");

const devMode = process.env.NODE_ENV !== "production";

module.exports = {
    entry: {
        app: "./Pages/app.ts"
    },
    output: {
        filename: "js/[name].bundle.js",
        path: path.resolve(__dirname, "./wwwroot"),
    },
    devtool: "source-map",
    mode: devMode ? "development" : "production",
    optimization: {
        minimize: devMode ? false : true,
        minimizer: [
            new TerserPlugin({
                extractComments: false
            })
        ],
        splitChunks: {
            cacheGroups: {
                vendor: {
                    name: "vendor",
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "all"
                }
            }
        }
    },
    resolve: {
        extensions: [
            ".ts", ".js", ".css", ".scss"
        ]
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: "ts-loader"
            },
            {
                test: /\.(sa|sc)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 2
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require("autoprefixer"),
                                    postcssPresetEnv({
                                        browsers: [">2%"]
                                    })
                                ]
                            }
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            implementation: require("sass")
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: devMode ? "css/[name].css" : "css/[name].css"
        }),
        new CleanWebpackPlugin({
            cleanStableWebpackAssets: true,
            cleanOnceBeforeBuildPatterns: [
                path.resolve(__dirname, "./wwwroot/js"),
                path.resolve(__dirname, "./wwwroot/css")
            ]
        })
    ]
};

我看不出有什么问题。我对类似错误进行了研究，但在我发现的解决方案中，有关于为图像添加加载程序或更改test 或React 或Angular 框架的特定解决方案的信息。就我而言，我使用的是没有任何框架的 TypeScript 和 SCSS。

Answer 1

在我的例子中，file-loader 丢失了，因为 webpack 无法解析我的 scss 中的图像和字体文件，所以我不得不再添加两个规则：

{
    test: /\.(png|jpg|gif|svg)$/,
    use: [
        {
            loader: "file-loader",
            options: {
                name: "[name].[ext]",
                publicPath: "../images",
                emitFile: false
            }
        }
    ]
},
{
    test: /\.(eot|ttf|woff|woff2)$/,
    use: [
        {
            loader: "file-loader",
            options: {
                name: "[name].[ext]",
                publicPath: "../fonts",
                emitFile: false
            }
        }
    ]
}

最后是我的webpack.config.js：

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const postcssPresetEnv = require("postcss-preset-env");
const TerserPlugin = require("terser-webpack-plugin");

const devMode = process.env.NODE_ENV !== "production";

module.exports = {
    entry: {
        app: "./src/app.ts"
    },
    output: {
        filename: "js/[name].bundle.js",
        path: path.resolve(__dirname, "./dist"),
    },
    devtool: "source-map",
    mode: devMode ? "development" : "production",
    optimization: {
        minimize: devMode ? false : true,
        minimizer: [
            new TerserPlugin({
                extractComments: false
            })
        ],
        splitChunks: {
            cacheGroups: {
                vendor: {
                    name: "vendor",
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "all"
                }
            }
        }
    },
    resolve: {
        extensions: [
            ".ts", ".js", ".css", ".scss"
        ]
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: "ts-loader"
            },
            {
                test: /\.(scss|css)$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 2
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require("autoprefixer"),
                                    postcssPresetEnv({
                                        browsers: [">2%"]
                                    })
                                ]
                            }
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            implementation: require("sass")
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            publicPath: "../images",
                            emitFile: false
                        }
                    }
                ]
            },
            {
                test: /\.(eot|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            publicPath: "../fonts",
                            emitFile: false
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name].css"
        }),
        new CleanWebpackPlugin({
            cleanStableWebpackAssets: true,
            cleanOnceBeforeBuildPatterns: [
                path.resolve(__dirname, "./dist/js"),
                path.resolve(__dirname, "./dist/css")
            ]
        })
    ]
};

如果有人想要，我的目录结构：

- dist/
  - css/
  - fonts/
  - images/
  - js/
- src/
  - app.ts
  - style.scss