时间戳

首页 > 解决方案 > Webpack：没有加载器来处理 SCSS 是输入存在

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

问题描述

我已经安装了 Webpack 5 (ver. 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'
      })
    ],
};

应该感谢帮助调试这个。

标签： csswebpacksasssass-loader

解决方案

我发现了错误。更换：

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

和

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

修复它。

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

推荐阅读