在 postcss & rollup 中创建单独的 CSS 文件答案

【问题标题】：Create separate CSS files in postcss & rollup在 postcss & rollup 中创建单独的 CSS 文件
【发布时间】：2021-03-29 13:54:11
【问题描述】：

我希望在我的 JS 中导入的每个 css 文件都为我的构建创建一个新的 css 文件。例如：

import "./app.css";
import "./admin.css";

将创建dist/app.css 和dist/admin.css。我正在使用汇总，这是我的配置文件：

import commonjs from "@rollup/plugin-commonjs";
import postcss from "rollup-plugin-postcss";
import resolve from "@rollup/plugin-node-resolve";
import { terser } from "rollup-plugin-terser";

import postcssImport from "postcss-import";
import postcssNested from "postcss-nested";
import autoprefixer from "autoprefixer";

const dev = process.env.WP_ENV === "development";

export default {
  input: "src/main.js",
  output: {
    sourcemap: dev,
    format: "iife",
    name: "main",
    file: "dist/main.bundle.js",
  },
  plugins: [
    resolve({
      browser: true,
    }),
    postcss({
      plugins: [postcssImport(), postcssNested(), autoprefixer()],
      extract: true,
      sourceMap: "inline",
      minimize: !dev,
    }),
    commonjs(),
    !dev && terser(),
  ],
  watch: {
    clearScreen: false,
  },
};

【问题讨论】：

我也会对答案非常感兴趣...

标签： css build rollupjs postcss

【解决方案1】：

尚未记录，但您可以根据their source code使用include、exclude。

这里是两个 css 文件的示例：

import { resolve } from "path"

plugins: [
  postcss({
    include: "**/admin.css",
    extract: resolve('dist/admin.css')
  }),
  postcss({
    include: "**/app.css",
    extract: resolve('dist/app.css')
  })
]

如果你想排除一个文件：

plugins: [
  postcss({
    exclude: "**/bootstrap.css",
    extract: resolve('dist/app.css')
  }),
  postcss({
    include: "**/bootstrap.css",
    extract: resolve('dist/bootstrap.css')
  })
]

【讨论】：