Сделал подгрузку js и картинок, но не получается сделать sass?

Когда речь идет о загрузке JavaScript и изображений с помощью Webpack, вам, скорее всего, нужно использовать соответствующие загрузчики (loaders). Однако, чтобы включить поддержку Sass, вам нужно установить и настроить загрузчик sass-loader.

Во-первых, убедитесь, что у вас установлен интерфейс командной строки для Node.js (npm) и установлен webpack с его конфигурационным файлом (webpack.config.js). Если у вас это уже установлено, следуйте инструкциям ниже.

1. Установите пакеты:

Вам необходимо установить несколько пакетов, чтобы добавить поддержку Sass:

npm install sass-loader node-sass webpack --save-dev

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

Откройте файл webpack.config.js и добавьте модуль и соответствующие правила для загрузки Sass. Ваши правила должны выглядеть примерно так:

module.exports = {
  //...остальная конфигурация
  module: {
    rules: [
      {
        test: /.scss$/,
        use: [
          // 3. Добавьте style-loader
          { loader: 'style-loader' },
          // 2. И добавьте css-loader
          { loader: 'css-loader' },
          // 1. Наконец, добавьте sass-loader
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
};

Это означает, что при сопоставлении файлов с расширением .scss, Webpack будет использовать sass-loader для компиляции Sass в CSS, затем css-loader для загрузки CSS и style-loader для добавления стилей внутри HTML.

3. Используйте Sass в вашем проекте:

Теперь вы можете использовать Sass в своем проекте, создав файлы с расширением .scss и импортируя их в ваши JavaScript-файлы или в другие Sass-файлы.

Например, создайте index.scss и импортируйте его в вашем JavaScript-файле следующим образом:

import './index.scss';

4. Протестируйте ваш проект:

Запустите сборку проекта с помощью Webpack и проверьте, что загрузчик sass-loader работает должным образом и успешно компилирует Sass в CSS.

Вот и все! Теперь вы должны быть в состоянии загружать и испольщовать SASS в вашем проекте с помощью Webpack.