Angular构建执行postcss -u autoprefixer报charset=utf-8编码错误求解

AngularJS项目构建流程中执行postcss -u autoprefixer命令处理样式时，抛出Error: Unsupported source map encoding charset=utf-8报错，当前环境使用的postcss-cli版本为2.4.0。

• 核心问题是postcss-cli 2.4.0依赖的source map解析库版本过低，不支持带charset=utf-8标识的source map data URI格式。
• 项目中上游样式处理环节（包括高版本sass、less，或AngularJS内置的样式构建插件）生成的内联source map，会在data URI头部携带;charset=utf-8参数，完整格式为data:application/json;charset=utf-8;base64,{base64编码的sourcemap内容}。旧版解析逻辑仅识别data:application/json;base64,开头的格式，匹配失败就会抛出该编码不支持的错误。
• 该问题一般在升级上游构建依赖、未同步更新postcss-cli版本时触发。

按适配成本从低到高选择：

• 升级postcss-cli（推荐）：执行npm install postcss-cli@^3.0.0 --save-dev，3.x及以上版本已经更新了底层source map解析依赖，原生支持带charset参数的source map格式，原有构建命令无需任何修改即可正常运行，不会破坏现有autoprefixer的处理逻辑。
• 临时关闭source map：如果受项目环境限制无法升级依赖，可以给postcss命令增加--no-map参数，跳过source map解析环节，命令示例：

  postcss -u autoprefixer --no-map src/css/*.css -o dist/css/
  

• 预处理兼容：如果既不能升级postcss-cli，又必须保留source map调试功能，可以在postcss执行前增加简单的文本预处理步骤，把待处理CSS文件内source map声明中的;charset=utf-8字符串替换为空，再传入postcss处理即可绕过解析校验。

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