У меня установлен sass, но react-scripts требует node-sass для компиляции. Как это исправить?

Question

[mindgrow]

В react проекте используется scss
Для сборки использую react-scripts
В проект установлен компонент sass

Проблема в том, что когда я выполняю билд "npm run build" происходит ошибка

PS C:\Users\admin\source\repos\eventsystem\EventSystem\ClientApp> npm run build

> webapplication@0.1.0 build
> react-scripts build

Creating an optimized production build...
Failed to compile.

./src/pages/event/EventSearch.scss
To import Sass files, you first need to install node-sass.
Run `npm install node-sass` or `yarn add node-sass` inside your workspace.
Require stack:
- C:\Users\admin\source\repos\eventsystem\EventSystem\ClientApp\node_modules\react-scripts\node_modules\sass-loader\lib\loader.js
- C:\Users\admin\source\repos\eventsystem\EventSystem\ClientApp\node_modules\react-scripts\node_modules\loader-runner\lib\loadLoader.js
- C:\Users\admin\source\repos\eventsystem\EventSystem\ClientApp\node_modules\react-scripts\node_modules\loader-runner\lib\LoaderRunner.js
- C:\Users\admin\source\repos\eventsystem\EventSystem\ClientApp\node_modules\react-scripts\node_modules\webpack\lib\NormalModule.js
- C:\Users\admin\source\repos\eventsystem\EventSystem\ClientApp\node_modules\react-scripts\node_modules\webpack\lib\NormalModuleFactory.js
- C:\Users\admin\source\repos\eventsystem\EventSystem\ClientApp\node_modules\react-scripts\node_modules\webpack\lib\Compiler.js
- C:\Users\admin\source\repos\eventsystem\EventSystem\ClientApp\node_modules\react-scripts\node_modules\webpack\lib\webpack.js
- C:\Users\admin\source\repos\eventsystem\EventSystem\ClientApp\node_modules\react-scripts\scripts\build.js

Все решения которые я ранее видел - это удалить node-sass и поставить sass
node-sass не хочу ставить, так как с ним множество проблем, которые решает пакет sass

Подскажите как исправить ошибку и из-за чего она возникает?

Comments

[Александр]

Какая версия react-scripts?

[mindgrow]

Александр, 3.0.1, могу использовать только её

[Александр]

mindgrow, а надо 4.0.2 и выше. Тогда ставьте node-sass со всеми её зависимостями (python 2 + c++ builder tools 2015/2017/2019). https://qna.habr.com/q/1119254

[mindgrow]

Александр, спасибо, а вот это интересно, попробую копать в эту сторону

Answer 1

[Enzear1]

Сначало скачайте пакеты sass
npm install sass-loader sass webpack --save-dev
Зайдите в webpack react по пути \my-app\node_modules\react-scripts\config и найдите файл webpack.config.js
И в module rules добавьте

{
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      }

Документация webpack https://webpack.js.org/loaders/sass-loader/