WEBPACK - Как получить отдельные CSS-файлы из папки

Question

У меня есть проблема, и я не знаю, возможно ли ее решить.
В моем проекте у меня есть две папки: макет и блоки

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