webpack：没有用于处理输入的SCSS的加载器

Question

$ npx webpack
asset index.js 555 KiB [compared for emit] (name: main)
runtime modules 1.25 KiB 6 modules
cacheable modules 532 KiB
  ./src/index.js 238 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 531 KiB [built] [code generated]
  ./src/style.scss 78 bytes [built] [code generated] [1 error]

ERROR in ./src/style.scss 1:11
Module parse failed: Unexpected token (1:11)
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
> $body-color: red;
| 
| body {
 @ ./src/index.js 2:0-22

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

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const isDevelopment = process.env.NODE_ENV === 'development'

module.exports = {
    entry: "./src/index.js",
    mode: "development",
    output: {
        filename: "index.js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
          test: /\.module\.s(a|c)ss$/,
        use: [
                  MiniCssExtractPlugin.loader,
                  "css-loader",
                   {
                        loader: "sass-loader",
                        options: {
                          // Prefer `dart-sass`
                          implementation: require("sass"),
                        },
                  },
               ],
            },
        ],
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: isDevelopment ? '[name].css' : '[name].[hash].css',
        chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
      })
    ],
};

将感谢帮助调试这个。

Answer 1

我发现了错误。替换：

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

与

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

修复它。