Как настроить авто компилятор под Sass?

Для настройки автоматической компиляции Sass с использованием Webpack, вам потребуется выполнить несколько шагов.

  1. Установите необходимые пакеты:

Выполните команду npm install sass-loader node-sass webpack --save-dev для установки sass-loader, node-sass и webpack.

  1. Настройте конфигурацию Webpack:

В вашем конфигурационном файле webpack.config.js добавьте правило для компиляции Sass файлов, используя sass-loader. Пример такого правила:

   module: {
     rules: [
       {
         test: /.scss$/,
         use: [
           'style-loader',
           'css-loader',
           'sass-loader'
         ]
       }
     ]
   }
  1. Создайте файлы Sass:

Создайте файлы с расширением .scss или .sass в вашем проекте и начните писать на Sass.

  1. Импортируйте файлы Sass в вашу кодовую базу:

Вам необходимо импортировать файлы Sass в основной файл вашего проекта (например, app.js или index.js). Webpack будет применять правило, которое вы настроили в шаге 2, и компилировать Sass в CSS.

  1. Запустите сборку проекта:

Запустите команду npm run build или webpack (если у вас установлен глобально webpack) для того чтобы скомпилировать ваш проект.

После выполнения этих шагов, Webpack будет автоматически компилировать Sass файлы в CSS каждый раз, когда вы запускаете сборку проекта. Если у вас есть разделение на разработку и продакшн сборки, убедитесь, что правила компиляции Sass настроены для обеих сборок.