如何在PostCSS中可控合并多个CSS文件为单个输出文件？

当然可以通过PostCSS配置实现你要的功能，不需要依赖cat命令，PostCSS本身支持指定输入文件顺序、生成多组输出文件，以下是具体实现方案：

方案一：通过CLI命令直接指定（适合简单场景） #

在package.json的scripts里直接定义多组输入输出，明确指定文件顺序：

{
  "scripts": {
    "build:css": "postcss src/reset.css src/variables.css src/main.css --output dist/main-bundle.css && postcss src/admin.css src/dashboard.css --output dist/admin-bundle.css",
    "watch:css": "postcss src/reset.css src/variables.css src/main.css --output dist/main-bundle.css --watch & postcss src/admin.css src/dashboard.css --output dist/admin-bundle.css --watch"
  }
}

• 用空格分隔输入文件，PostCSS会按书写顺序合并它们
• 通过&&串联多个命令，实现一次生成多份输出文件
• 监听模式下用&并行运行多个监听任务（Windows系统可改用cross-env或其他并行工具）

方案二：通过PostCSS配置文件管理（适合复杂场景） #

如果需要更清晰的配置管理、不同输出用不同插件规则，可以将postcss.config.js导出为数组，每个元素对应一组输入输出配置：

1. 修改package.json的脚本 #

移除原有的concat:css，简化build和watch命令：

{
  "name": "postcss-boo",
  "version": "1.0.0",
  "description": "PostCSS configuration for BOO",
  "main": "index.js",
  "scripts": {
    "build:css": "postcss --config postcss.config.js",
    "watch:css": "postcss --config postcss.config.js --watch"
  },
  "keywords": [],
  "author": "BOO",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.21",
    "cross-env": "^10.0.0",
    "cssnano": "^7.1.1",
    "postcss": "^8.5.6",
    "postcss-cli": "^11.0.1",
    "postcss-preset-env": "^10.3.0"
  }
}

2. 修改postcss.config.js为多组配置 #

const postcssPresetEnv = require("postcss-preset-env");
const cssNano = require("cssnano");

module.exports = [
  // 第一组：主样式包，按指定顺序合并文件
  {
    input: ["src/reset.css", "src/variables.css", "src/main.css"],
    output: "dist/main-bundle.css",
    plugins: [
      postcssPresetEnv({ stage: 1 }),
      cssNano()
    ]
  },
  // 第二组：后台管理样式包，独立合并
  {
    input: ["src/admin.css", "src/dashboard.css"],
    output: "dist/admin-bundle.css",
    plugins: [
      postcssPresetEnv({ stage: 1 }),
      // 这里可以单独配置插件，比如不压缩或用不同的cssnano参数
      cssNano({ preset: "default" })
    ]
  }
];

关键优势 #

• 完全控制输入文件的顺序，避免依赖目录排序的不确定性
• 支持多组输入输出，按需生成不同的样式包
• 每组配置可独立设置插件规则，灵活适配不同场景
• 保留PostCSS的插件处理流程，合并后自动完成前缀补全、压缩等操作

内容的提问来源于stack exchange，提问作者Walrus