Что нужно прописать в конфиге webpack, чтобы появилась возможность писать все стили не в одном файле scss, а в нескольких?

Для того, чтобы разбить стили по разным файлам SCSS в проекте и скомпилировать их в отдельные CSS файлы, вам потребуется внести некоторые изменения в конфигурацию webpack.

1. Установите необходимые плагины:

   npm install --save-dev mini-css-extract-plugin

2. Импортируйте плагин в конфигурационный файл webpack:

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

3. Создайте экземпляр плагина в разделе plugins файла webpack.config.js:

   plugins: [
     new MiniCssExtractPlugin({
       filename: '[name].css',
       chunkFilename: '[id].css',
     }),
   ],

Это позволит создать отдельные файлы CSS для каждого входного файла SCSS.

4. В настройке module.rules добавьте правила для обработки SCSS файлов:

   module: {
     rules: [
       {
         test: /.scss$/,
         use: [
           MiniCssExtractPlugin.loader,
           'css-loader',
           'sass-loader',
         ],
       },
     ],
   },

Это сконфигурирует webpack для использования MiniCssExtractPlugin.loader для извлечения и сохранения файлов CSS.

5. Убедитесь, что ваши стили импортируются в основной файл JavaScript, который вы используете в качестве точки входа в проекте:

   import './styles/main.scss';

6. Создайте несколько файлов SCSS в папке styles или любой другой, и добавьте стили в них.

Теперь, когда вы будете запускать сборку проекта, webpack будет компилировать каждый из ваших SCSS файлов в отдельный CSS файл, который можно подключать в соответствующих разделах вашего проекта.