Webpack：没有加载器来处理 SCSS 是输入存在

Question

我已经安装了 Webpack 5（版本 5.37.0）并且想要将 SASS 文件编译为独立的 CSS 文件。我收到以下错误：

$ npx 网络包 资产 index.js 555 KiB [与 emit 相比]（名称：main） 运行时模块 1.25 KiB 6 个模块 可缓存模块 532 KiB ./src/index.js 238 字节 [内置] [代码生成] ./node_modules/lodash/lodash.js 531 KiB [内置] [代码生成] ./src/style.scss 78 字节 [内置] [代码生成] [1 错误] ./src/style.scss 中的错误 1:11 模块解析失败：意外令牌 (1:11) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见 https://webpack.js.org/concepts#loaders > $体色：红色； | |身体 { @ ./src/index.js 2:0-22

我了解这意味着不存在处理 SCSS 输入的加载器。

当我用谷歌搜索这个错误时，我找到了很多答案，但它们都不起作用。我认为它们适用于旧版本的 Webpack。

下面是我的整个webpack.config.js：

常量路径 = 要求（“路径”）； const MiniCssExtractPlugin = require('mini-css-extract-plugin') const isDevelopment = process.env.NODE_ENV === '开发' 模块.exports = { 条目：“./src/index.js”， 模式：“发展”， 输出： { 文件名：“index.js”， 路径：path.resolve(__dirname, "dist") }, 模块： { 规则：[ { 测试：/\.module\.s(a|c)ss$/, 采用： [ MiniCssExtractPlugin.loader, “css加载器”， { 装载机：“萨斯装载机”， 选项： { // 首选 `dart-sass` 实现：要求（“萨斯”）， }, }, ], }, ], }, 插件：[ 新的 MiniCssExtractPlugin({ 文件名：是发展？ '[name].css' : '[name].[hash].css', 块文件名：是发展？ '[id].css'：'[id].[hash].css' }) ], };

感谢帮助调试这个。

Answer 1

我发现了错误。替换：

test: /\.module\.s(a|c)ss$/,

与

 test: /\.s(a|c)ss$/,

修复它。

我对 Webpack 还是很陌生，从网络上的教程中剪切和粘贴有它的危险。