WEBPACK-如何从文件夹中获取单个的CSS文件

时间:2019-07-04 10:30:40

标签: javascript css node.js webpack sass

我有问题,我不知道是否有可能解决。
在我的项目中,我有两个文件夹:布局

layout
|__header.scss
|__footer.scss
|__sidebar.scss

blocks
|__ block1.scss
|__ block2.scss
|__ block3.scss

我想得到的是布局文件夹中的单个文件(例如:layout.min.css)和块的单个文件(例如:block1.min.cssblock2.min.cssblock3.min.css )。

有可能吗?

1 个答案:

答案 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],
};