使用 webpack 将 SASS 编译成多个 CSS 文件

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它似乎只从最后一个块文件夹（`./blocks/block3'）中获取 SASS。

这表明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