Как собрать в бандл сначала стили css, а потом scss?

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

Во-первых, убедитесь, что у вас установлены необходимые зависимости: webpack, style-loader, css-loader и sass-loader. Вы можете установить их с помощью npm:

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

Затем, откройте файл webpack.config.js (если он уже существует) или создайте новый файл в корневой директории вашего проекта.

Вам понадобится настройка правил для загрузчика стилей (style-loader и css-loader) и загрузчика SCSS (sass-loader). Ваша конфигурация может выглядеть примерно так:

module.exports = {
  // ...
  module: {
    rules: [
      // Правило для обработки CSS файлов
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },

      // Правило для обработки SCSS файлов
      {
        test: /.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  // ...
};

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

Важно отметить, что порядок загрузчиков указывается в обратном порядке, то есть закрузчик, указанный первым, будет применен последним.

Когда вы запустите сборку проекта с помощью команды webpack, Webpack соберет все ваши стили в один бандл, следуя указанной последовательности: сначала CSS, а затем SCSS.

Если вам нужно настроить другие опции сборки, такие как выходной путь и имя бандла, вы можете добавить соответствующую конфигурацию в файл webpack.config.js. У вас также может быть необходимо настроить плагины или другие параметры в зависимости от ваших конкретных потребностей.

Надеюсь, эта информация поможет вам успешно собрать ваши стили в указанной последовательности при использовании Webpack. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.