Что нужно написать в конфигурации WebPack для компиляции Saas кода?

Конфигурация Webpack для SASS

Для работы с SASS в Webpack необходимо настроить цепочку загрузчиков (loaders), которые обрабатывают .scss файлы и преобразуют их в CSS.

Необходимые пакеты

Сначала нужно установить зависимости:

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

• sass-loader — преобразует SASS/SCSS в CSS
• sass — компилятор SASS (dart-sass)
• style-loader — внедряет CSS в DOM
• css-loader — обрабатывает импорты CSS и URL

Конфигурация webpack.config.js

В файле webpack.config.js нужно добавить правило для обработки SASS файлов в секции module.rules:

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

Порядок загрузчиков важен: они применяются справа налево:

1. sass-loader компилирует SASS -> CSS
2. css-loader обрабатывает импорты и URL
3. style-loader вставляет CSS в тег <style> в HTML

Продвинутая конфигурация

Для production окружения часто используют отдельное извлечение CSS в файлы:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          process.env.NODE_ENV === 'production'
            ? MiniCssExtractPlugin.loader
            : 'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles/[name].[contenthash].css'
    })
  ]
};

Опции sass-loader

Можно передать дополнительные опции компилятору SASS:

{
  test: /\.s[ac]ss$/i,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
        sassOptions: {
          outputStyle: 'compressed',
          precision: 6
        }
      }
    }
  ]
}

Source Maps

Для отладки полезно включить source maps:

{
  test: /\.s[ac]ss$/i,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { sourceMap: true } },
    { loader: 'sass-loader', options: { sourceMap: true } }
  ]
}

Эта конфигурация позволит разработчикам видеть в DevTools оригинальные .scss файлы вместо скомпилированного CSS.

Итог

Основная конфигурация требует трёх загрузчиков в правильном порядке. Для production добавляют извлечение CSS в отдельные файлы через MiniCssExtractPlugin. Это обеспечивает эффективную компиляцию SASS и оптимизацию размера бандла.