Есть ли способ в Webpack извлечь импортированный CSS в несколько файлов?

Question

Это моя структура папок:

src/yolo/block.js
src/yolo/editor.scss
src/yolo/style.scss

Это отрывок из моего webpack.config.js

module.exports = {
  entry: glob.sync('src/**/block.js'),
  output: { path: 'dist' },
  plugins: [new MiniCssExtractPlugin()],
  ...
}

Так выглядит файл js:

block.js

import './editor.scss'
import './style.scss'

Я ожидаю, что результат будет:

dist/yolo/block.js -> es5
dist/yolo/editor.css
dist/yolo/style.css

Но вместо этого я получаю:

dist/yolo/block.js
dist/yolo/block.css

Answer 1

Что делает Webpack здесь, так это компилирует все зависимости CSS и JS в 2 файла, потому что они требуются / импортируются в block.js. Импорт файла означает, что они нужны вашему коду, было бы неправильно не упаковывать их с помощью Webpack.

Если вы хотите, чтобы Webpack компилировал разные CSS / JS в разные файлы, вам нужно создать еще один JS-файл, который будет включать только один CSS-файл, и удалить соответствующий импорт из block.js.