Как WebPack узнает что файлы Saas

Webpack сам по себе не понимает Sass. Для обработки .scss или .sass файлов нужны специальные загрузчики (loaders). Основные из них:

1. sass-loader – компилирует Sass/SCSS в CSS.
2. css-loader – обрабатывает @import и url() в CSS.
3. style-loader – инжектит стили в DOM.

Пример конфигурации в webpack.config.js:

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

Порядок loaders важен – они применяются справа налево (sass-loader → css-loader → style-loader). Также может потребоваться установка node-sass или dart-sass как зависимости.