autoprefixer-cli运行无报错但未输出文件，旧浏览器CSS配置遇问题

嘿，我来帮你捋捋这个问题——这种情况我之前也碰到过好几次，大概率是配置或者命令的细节没做到位。咱们一步步来排查：

• 确认浏览器目标配置是否正确
  你说要适配IE，但如果没明确告诉autoprefixer需要支持哪些浏览器，它只会默认处理主流现代浏览器，不会自动加IE的前缀。你可以通过两种方式指定：

  1. 在项目根目录的package.json里添加browserslist配置：

     "browserslist": [
       "IE 11",
       "> 1%",
       "last 2 versions"
     ]
     

  2. 直接在命令行里用--browsers参数指定，比如：

     autoprefixer-cli --browsers "IE 11, > 1%" input.css -o output.css
     

• 检查命令是否正确指定了输入输出文件
  很多人容易犯的错是只跑autoprefixer-cli而没指定要处理的文件，这样工具根本不知道该操作哪个CSS。正确的命令格式应该是：

  # 单文件处理
  autoprefixer-cli src/style.css -o dist/style.css
  # 批量处理（比如处理目录下所有CSS）
  autoprefixer-cli src/*.css -d dist/
  

  另外，注意看终端有没有报错信息——有时候工具会抛出配置错误，但如果没留意的话很容易忽略。

• 验证你的CSS是否真的需要前缀
  先确认你写的CSS属性确实需要IE前缀，比如flexbox、grid、transform这些属性在IE11里需要前缀，但如果你的代码里已经手动加了前缀，或者用了本身不需要前缀的属性（比如color、margin），autoprefixer自然不会修改文件。举个例子：
  原始代码：

  .container {
    display: flex;
    justify-content: center;
  }
  

  处理后应该变成：

  .container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
  }
  

  你可以对比下前后的代码，看是否有这类前缀被添加。

• 检查依赖和版本问题
  autoprefixer-cli依赖postcss，如果你只安装了autoprefixer-cli而没装postcss，可能会导致工具静默失败。建议重新安装相关依赖：

  # 全局安装（如果之前是全局装的）
  npm uninstall -g autoprefixer-cli postcss
  npm install -g autoprefixer-cli postcss
  # 本地项目安装更推荐
  npm uninstall autoprefixer-cli postcss --save-dev
  npm install autoprefixer-cli postcss --save-dev
  

  另外，版本不兼容也可能出问题，尽量安装稳定版本的包。

• 确认配置文件是否正确生效
  如果你用了.postcssrc或postcss.config.js配置文件，要确保里面正确引入了autoprefixer插件。比如postcss.config.js的内容应该是：

  module.exports = {
    plugins: [
      require('autoprefixer')
    ]
  }
  

  如果配置文件写错了，工具可能不会加载autoprefixer，自然不会处理CSS。

你可以先从检查浏览器配置和命令格式开始，看看终端有没有报错信息，再对比CSS前后的差异。如果还是找不到问题，可以把你的命令、配置文件内容和需要处理的CSS片段贴出来，我再帮你细化排查。

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