前端项目中npm autoprefixer无法正常工作的技术求助

给你梳理几个核心问题点及对应解决方法：

1. 命令行参数已过时 #

你用的-b 'last 10 versions'是旧版Autoprefixer的参数，新版已改用--override-browserslist。把prefix:css脚本修改为：

"prefix:css": "postcss --use autoprefixer --override-browserslist 'last 10 versions' styles/app.css -o styles/app.min.css"

2. 构建流程未关联前缀处理 #

你的build脚本直接用Sass生成压缩后的app.min.css，完全跳过了Autoprefixer的处理步骤。要让生产构建的CSS带前缀，得调整流程：

• 先让Sass编译未压缩的CSS到styles/app.css
• 再用Autoprefixer处理该文件，输出带前缀的压缩版
  修改后的build脚本如下：

"build": "sass scss/app.scss styles/app.css && postcss --use autoprefixer --override-browserslist 'last 10 versions' styles/app.css -o styles/app.min.css --no-map"

（--no-map用于避免生成不必要的sourcemap，不需要可自行移除）

3. 改用PostCSS配置文件更可靠 #

命令行参数容易出现兼容问题，建议在项目根目录新建postcss.config.js，内容如下：

module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['last 10 versions']
    })
  ]
}

之后可以把prefix:css简化为：

"prefix:css": "postcss styles/app.css -o styles/app.min.css"

这种配置方式更清晰，也更不容易出错。

验证是否生效 #

写一段需要前缀的测试CSS，比如：

.test {
  display: grid;
  gap: 10px;
}

执行npm run prefix:css后打开styles/app.min.css，查看是否生成了-ms-grid这类前缀，有则说明已生效。

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