如何通过autoprefixer-cli或PostCSS CLI指定SourceMap生成路径？

你遇到的问题是因为--map参数不是直接接收路径字符串，而是需要传入JSON格式的配置对象来指定SourceMap的输出路径。下面分别给你两种工具的正确用法：

1. 使用autoprefixer-cli #

你需要通过annotation字段来指定SourceMap文件的路径，命令格式如下：

autoprefixer-cli css/style.css -o css/style.css --map "{\"annotation\": \"maps/style.css.map\"}"

• 这里的annotation就是用来设置生成的SourceMap文件存放路径的字段，比如上面的命令会把map文件生成到maps/目录下（需要确保这个目录已经存在哦）
• 如果你的系统支持单引号，可以简化转义：

autoprefixer-cli css/style.css -o css/style.css --map '{"annotation": "maps/style.css.map"}'

2. 使用PostCSS CLI #

同样需要通过--map的配置对象来指定路径，命令如下：

postcss --replace css/style.css --use autoprefixer --map "{\"annotation\": \"maps/style.css.map\"}"

更推荐的方式：使用PostCSS配置文件 #

如果经常需要这类配置，建议创建一个postcss.config.js文件，把配置写在里面，这样命令更简洁：

module.exports = {
  plugins: [
    require('autoprefixer')
  ],
  map: {
    annotation: 'maps/style.css.map'
  }
}

然后执行命令就不需要带--map参数了：

postcss --replace css/style.css --use autoprefixer

原理说明 #

之前直接传路径被忽略，是因为--map参数的默认行为是：当你传入非JSON格式的字符串时，工具会忽略这个无效配置，转而使用默认规则——将SourceMap生成在输出文件（或被替换文件）的同目录下。只有传入正确的JSON配置对象，才能覆盖默认行为。

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