Как правильно настроить загрузчик sass в webpack?

Question

[Алексей]

Всем привет! Пытаюсь настроить webpack на сборку проекта с использованием sass, но в терминале выдается ошибка

ERROR in ./src/assets/styles/styles.scss 1:5
Module parse failed: Unexpected token (1:5)
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 {
| background: #000;
| }
@ ./src/assets/js/index.js 1:0-31

никак не соображу, где ошибка, ведь я скачал и установил необходимые зависимости в package.json

"devDependencies": {
    "@babel/core": "^7.23.2",
    "@babel/preset-env": "^7.23.2",
    "autoprefixer": "^10.4.16",
    "babel-loader": "^9.1.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.8.1",
    "cssnano": "^6.0.1",
    "html-webpack-plugin": "^5.5.3",
    "mini-css-extract-plugin": "^2.7.6",
    "sass": "^1.69.5",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },

а в webpack.config.js настроил module

module: {
    rules: [
      {
        test: /\.(s[ac]ss|css)$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },

подключая к точке входа .css стили применяются, подключаю .scss вылетает ошибка. Буду признателен за подсказку, что я делаю не так.

Comments

[Егор Живагин]

Я не эксперт в регулярках (мягко говоря), но по-моему у вас символ "|" потерялся в [ac]

test: /\.(s[a|c]ss|css)$/i,