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

Как Webpack определяет SASS файлы?

Этот вопрос проверяет понимание системы загрузчиков (loaders) в Webpack и механизма обработки файлов разных типов.

Основной механизм: Расширения файлов

Webpack использует расширение файла (.sass, .scss) для определения типа и выбора соответствующего loadera. Это ключевой момент.

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

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        // 1. Webpack ищет файлы с расширениями .scss и .sass
        test: /\.s[ac]ss$/i,
        // 2. Затем применяет эти loaders в обратном порядке
        use: [
          "style-loader",    // 3й этап: вставить style в DOM
          "css-loader",      // 2й этап: парсить CSS
          "sass-loader"      // 1й этап: скомпилировать SASS в CSS
        ]
      }
    ]
  }
};

Как это работает?

1. Regex паттерн (test)

• test: /.s[ac]ss$/i ищет файлы с расширениями .scss или .sass
• i флаг = case-insensitive

2. В коде приложения

import styles from "./styles.scss";
import vars from "./vars.sass";

// Webpack:
// 1. Видит расширение .scss
// 2. Проверяет test паттерны
// 3. Находит совпадение
// 4. Применяет loaders

3. Порядок обработки (справа налево)

• sass-loader: .scss -> .css
• css-loader: .css -> JavaScript object
• style-loader: вставить стили в DOM

Практический пример

// styles.scss
$primary-color: #3498db;

.button {
  background-color: $primary-color;
  padding: 10px 20px;
}

// React компонент
import "./styles.scss";

export function Button() {
  return <button className="button">Click me</button>;
}

CSS Modules с SASS

// webpack.config.js
{
  test: /\.s[ac]ss$/i,
  use: [
    "style-loader",
    {
      loader: "css-loader",
      options: { modules: true }
    },
    "sass-loader"
  ]
}

Альтернативные способы

1. Исключить node_modules

{
  test: /\.scss$/,
  exclude: /node_modules/,
  use: ["style-loader", "css-loader", "sass-loader"]
}

2. Только определённая директория

{
  test: /\.scss$/,
  include: /src\/styles/,
  use: ["style-loader", "css-loader", "sass-loader"]
}

Ключевые моменты

1. Всё начинается с расширения файла

• .scss -> Webpack видит расширение -> выбирает правило -> применяет loaders

2. Порядок loaders критичен

• Справа налево: sass-loader -> css-loader -> style-loader

3. Конфигурация явная

• Webpack не угадывает, нужно указать правило с test паттерном

На собеседовании

Хороший ответ включает:

• Механизм regex паттернов (test)
• Роль loaders и их порядок
• Понимание, что используется расширение файла
• Примеры конфигурации

Это показывает глубокое понимание инструментов.