我有问题,我不知道是否有可能解决。
在我的项目中,我有两个文件夹:布局和块
layout
|__header.scss
|__footer.scss
|__sidebar.scss
blocks
|__ block1.scss
|__ block2.scss
|__ block3.scss
我想得到的是布局文件夹中的单个文件(例如:layout.min.css
)和块的单个文件(例如:block1.min.css
,block2.min.css
,block3.min.css
)。
有可能吗?
答案 0 :(得分:0)
您可以使用以下配置为每个文件夹生成多个CSS捆绑包
const path = require("path");
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
const layoutCss = new ExtractTextWebpackPlugin("layout.css");
const blockCss = new ExtractTextWebpackPlugin("blocks.css");
module.exports = {
entry: "./src/index.js",
output: {
filename: "[name].js",
path: path.resolve(path.join(__dirname, "./dist")),
},
module: {
rules: [
{
test: /layout\/.*\.scss$/,
use: layoutCss.extract({
use: "css-loader",
}),
},
{
test: /block\/.*\.scss$/,
use: blockCss.extract({
use: "css-loader",
}),
},
],
},
plugins: [layoutCss, blockCss],
};