У меня установлен 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' }) ], };
Буду признателен за помощь в отладке.