如何用PostCSS在同目录生成带min后缀的压缩CSS文件

DevOps 小满

2026-7-19

解决PostCSS批量生成带min后缀的压缩CSS文件问题

问题原因

你原来的NPM脚本无法工作，核心问题是：

Shell的重定向符号>不支持多文件匹配，它会把所有输入的CSS内容合并输出到单个名为*.min.css的文件，而非为每个源文件生成对应压缩文件。
PostCSS CLI的用法不正确，需要使用官方提供的批量处理参数来指定输出规则。

解决方案

步骤1：安装必要依赖

首先确保安装PostCSS命令行工具和压缩插件cssnano：

npm install postcss-cli cssnano --save-dev

方法1：直接用PostCSS CLI参数（推荐）

修改package.json中的scripts，用--dir指定输出目录，--ext指定输出文件后缀，--use指定压缩插件：

"scripts": {
  "build:css": "postcss assets/css/*.css --dir assets/css --ext .min.css --use cssnano",
  "watch:css": "postcss assets/css/*.css --dir assets/css --ext .min.css --use cssnano -w"
}

--dir assets/css：将处理后的文件输出到原目录
--ext .min.css：自动将源文件名的后缀替换为.min.css，生成对应压缩文件
-w：监听文件变化，自动重新编译

方法2：使用PostCSS配置文件

如果需要更复杂的插件配置，可创建postcss.config.js文件：

module.exports = {
  plugins: [
    require('cssnano')({
      // 可选：自定义cssnano压缩配置，默认用preset: 'default'即可
      preset: 'default'
    })
  ]
}

然后简化NPM脚本：

"scripts": {
  "build:css": "postcss assets/css/*.css --dir assets/css --ext .min.css",
  "watch:css": "postcss assets/css/*.css --dir assets/css --ext .min.css -w"
}