Webpack: отсутствует загрузчик для обработки SCSS.

У меня установлен Webpack 5 (версия 5.37.0), и я хочу скомпилировать файл SASS в отдельный файл CSS. Я получаю следующую ошибку:

$ 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

Я понимаю, что это означает, что отсутствует загрузчик для обработки SCSS.

Когда я гуглил эту ошибку, я нахожу много ответов, но они не работают. Я думаю, они применимы к более старым версиям Webpack.

Ниже весь мой 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'
      })
    ],
};

Буду признателен за помощь в отладке.


person Free Radical    schedule 19.05.2021    source источник


Ответы (1)


Я нашел ошибку. Замена:

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

с участием

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

исправляет это.

Я все еще новичок в Webpack, и вырезание и вставка из руководств в Интернете имеет свои опасности.

person Free Radical    schedule 20.05.2021