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

Question

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

├── 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似乎只从 LAST 块文件夹（`./blocks/block3'）中获取 SASS。

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

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

标签： javascriptcsswebpacksasswebpack-4

Answer 1

使用 MiniCssExtractPlugin webpack 插件设法让这个在 webpack 4 中工作，在 webpack 5 中显然不需要一个小的解决方法。

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