Как настроить сборку Sass/SCSS в Webpack

Тип вопроса: CSS Вероятность: 10% Категория: Frontend Developer

Ответ

Для компиляции Sass в Webpack нужно:

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

npm install sass-loader sass css-loader style-loader --save-dev

Добавить правило в module.rules конфига Webpack:

module: {
  rules: [
    {
      test: /.s[ac]ss$/i,
      use: [
        'style-loader', // вставляет стили в DOM
        'css-loader',   // превращает CSS в CommonJS модули
        'sass-loader'   // компилирует Sass в CSS
      ]
    }
  ]
}

Для production лучше использовать MiniCssExtractPlugin вместо style-loader для выноса стилей в отдельные файлы. Порядок лоадеров важен - они применяются справа налево.