有没有办法将导入的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，则必须创建另一个仅包含一个CSS文件的JS文件，并从block.js中删除相应的导入。