Webpack:不存在用于处理SCSS is输入的加载程序

Question

我安装了Webpack 5(版本5.37.0(，并希望将SASS文件编译为独立的CSS文件。我得到以下错误：

$npx网络包asset index.js 555 KiB[比较发射](名称：main(运行时模块1.25 KiB 6个模块可缓存模块532KiB./src/index.js 238字节[builded][code generated]./node_modules/lodash/lodash.js 531 KiB[builded][code generated]./src/style.scss 78字节[builded][code generated][1个错误]中的错误/src/style.scss 1:11模块分析失败：意外的令牌(1:11(您可能需要一个适当的加载器来处理此文件类型，目前没有配置任何加载器来处理该文件。看见https://webpack.js.org/concepts#loaders>$body颜色：红色；||车身{@/src/index.js2:0-22

我知道这意味着不存在用于处理SCSS输入的加载程序。

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

以下是我的全部webpack.config.js:

const path＝require("path"(；const MiniCsExtractPlugin=require('mini-css-extract-plugin'(const isDevelopment=process.env.NODE_env==="开发"module.exports={entry:"./src/index.js"，模式："发展"，输出：{filename："index.js"，path:path.resolve(__dirname，"dist"(}，模块：{规则：[{测试：/\.module\.s(a|c(ss$/，使用：[MiniCsExtractPlugin.loader，"css加载程序"，{loader:"sass loader"，选项：{//喜欢"飞镖时髦"`实现：require("sass"(，}，}，]，}，]，}，插件：[新的MiniCsExtractPlugin({filename:isDevelopment？'[name].css'：'[name]。[hash].css'，chunkFilename:isDevelopment？'[id].css"："[id]。[哈希].css'})]，}

非常感谢您帮助调试。

Answer 1

我发现了错误。更换：

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

带有

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

修复它。

我对Webpack还很陌生，在网上剪切和粘贴教程有其危险。