Webpack 5 - 错误：模块解析失败：意外字符“@”

Question

我正在尝试在 webpack 5 中加载一些 .scss 文件，然后将它们输出为 .css 文件。 我已将配置设置为仅将 .scss 文件作为条目并使用 MiniCssExtractPlugin、css-loader、resolve-url-loader 和 sass-loader。

这是我的配置：

{
    target: 'web',
    stats: {
        errorDetails: true
    },
    entry: ScssEntryGenerator.generateStaticEntryPoint(),
    output: {
        filename: '[name].css',
        path: path.resolve(__dirname)
    },
    module: {
        rules: [
            {
                test: /\.scss$/i,
                use: [
                    'css-loader',
                    'resolve-url-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true, // <-- !!IMPORTANT!!
                        }
                    },
                    MiniCssExtractPlugin.loader,
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ],
};

js 的输出包含对 .scss 文件的引用：

var __webpack_exports__ = {};
__webpack_modules__["./Develop/Styles/accessible/site.scss"]();

并且 webpack 抛出了一个错误，就好像根本没有使用 sass-loader 一样：

Error: Module parse failed: Unexpected character '@' (4:0)
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

附注如果我将 MiniCssExtractPlugin.loader 移动到 use 数组的顶部，如文档中所示，webpack 会由于输出同名文件且发生冲突而中断。

Answer 1

根据我的研究，有必要将 mini-css-extract-plugin 加载器作为数组中的第一个加载器，这意味着我一直在错误的方向上。

感谢 webpack 插件，

LimitChunkCountPlugin

， 我将生成的块数量限制为 1，现在我最终只得到 .js 文件和我拥有的每个入口点的 css，这与我想要的足够接近，没有任何冲突，例如：

冲突：多个资源发送到同一个文件名

还需要注意的是输出中的文件名和

MiniCssExtractPlugin

插件配置中的文件名，它们不能相同。

对我来说，它们分别是

[name].js

和

[name].css

。

这是我现在的配置：

{
    target: 'web',
    stats: {
        errorDetails: true
    },
    entry: ScssEntryGenerator.generateStaticEntryPoint(),
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname),
        iife: false
    },
    module: {
        rules: [
            {
                test: /\.scss$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                            sassOptions: {
                                includePaths: [path.resolve(__dirname, 'Develop', 'Styles')]
                            }
                        }
                    },
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
        new webpack.optimize.LimitChunkCountPlugin({
            maxChunks: 1,
        }),
    ]
};