Question

考虑一个具有以下结构的webpack 4构建项目，该结构具有./blocks/index.js作为主要入口点：

├── assets
│   ├── css
│   │   ├── editor.blocks.css
│   │   ├── style.blocks.css
│   ├── js
│   │   ├── editor.blocks.js
├── blocks
│   ├── block1
│   │   ├── editor.scss
│   │   ├── style.scss
│   │   ├── index.js
│   ├── block2
│   │   ├── editor.scss
│   │   ├── style.scss
│   │   ├── index.js
│   ├── block3
│   │   ├── editor.scss
│   │   ├── style.scss
│   │   ├── index.js
│   ├── index.js

SASS文件被导入到每个块文件夹内的index.js文件中。

当webpack运行时，它应该：

将所有style.scss个文件串联并编译为./assets/css/style.blocks.css。
将所有editor.scss个文件串联并编译为./assets/css/editor.blocks.css。

目前，它可以工作，但是与其将所有style.scss文件串联和编译到./assets/css/style.blocks.css中，而将所有editor.scss文件串联和编译到./assets/css/editor.blocks.css中，却似乎抓住了SASS只能从LAST块文件夹中（`./blocks/block3'）。

这表明style.blocks.css和editor.blocks.css不断被覆盖，这是不正确的。我认为写最后两个CSS文件的加载器可能需要改为插件？我已经尝试过MiniCssExtractPlugin，但是无法基于多个SASS文件输出两个CSS文件。

这是完整的仓库：https://github.com/dgwyer/multiple-webpack-css-files

Answer 1

设法通过MiniCssExtractPlugin webpack插件在webpack 4中实现了这一目标，并且采取了较小的解决方法，显然在webpack 5中并不需要。

https://github.com/dgwyer/multiple-webpack-css-files

将带有Webpack的SASS编译成多个CSS文件

1 个答案: