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

Question

我有一个问题，我不知道是否可以解决它。
在我的项目中，我有两个文件夹：layout 和 blocks

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）。

有可能吗？

Answer 1

您可以使用以下配置为每个文件夹生成多个 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],
};