Webpack генерирует css файл для каждого импорта

Question

Я использую webpack и это для компиляции файлов s css:

{
  test: /\.scss$/i,
  use: [
    // Creates css files
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        esModule: true,
      },
    },
    "@teamsupercell/typings-for-css-modules-loader",
    // Translates CSS into CommonJS
    {
      loader: 'css-loader',
      options: {
        modules: true
      }
    },
    // Compiles Sass to CSS
    'sass-loader',
  ],
},

Это генерирует только один файл CSS с именем main. Я хочу сгенерировать файл CSS для каждого файла S CSS в моем источнике, чтобы я мог реализовать отложенную загрузку CSS.
Мне нужен способ генерировать их отдельно, а также генерировать JavaScript для загрузки при необходимости их с сервера.

Возможно ли это с плагинами, которые существуют сегодня?

Answer 1

Я хочу создать файл CSS для каждого файла S CSS в моем источнике, чтобы я мог реализовать отложенную загрузку CSS.

С этим требованием вы Мне не нужен веб-пакет. Вам достаточно пакета node-sass .

В файле package.json вы настраиваете scripts следующим образом:

{
    "name": "your_project_name",
    "version": "1.0.0",
    "private": true,
    "dependencies": {
        "node-sass": "^4.13.1"
    },
    "scripts": {
        "sass": "node-sass -w scss_folder -o css_folder --output-style compressed"
    }
}

Объяснение:

sass: Это имя вашей команды

node-sass, -w, -o, --output-style, compressed: Вы можете найти их объяснения по ссылке выше.

Структура вашего проекта выглядит следующим образом:

Your_project
|
|_ css_folder
|
|_ scss_folder
|
|___ file01.scss
|
|___ file02.scss
|
|_ package.json

В вашем проекте откройте командную строку (или терминал на Ma c) и введите:

npm run sass

Когда это готов к прослушиванию, вы можете попробовать создать новый файл s css внутри scss_folder. Если вы нажмете ctrl+s (или command+s на Ma c), в папке css_folder будет создан новый файл с тем же именем, а расширение нового файла будет .css. Это также сжато.