Next.js 13中PostCSS Autoprefixer不生效的解决方法咨询

AI 小北

2026-8-2

在Next.js 13中让Autoprefixer生效的解决步骤

修正browserslist拼写错误
你当前package.json里的"last 3 version"存在拼写错误，正确写法是"last 3 versions"（复数形式），这个错误会导致Autoprefixer无法正确识别目标浏览器规则，进而不生成前缀。修正后的配置如下：
```
{
  ...,
  "browserslist": [
    "last 3 versions",
    "> 1%",
    "not dead"
  ]
}
```
显式配置PostCSS文件
Next.js 13虽内置Autoprefixer，但默认可能未自动启用完整规则。在项目根目录创建或修改postcss.config.js文件，明确引入Autoprefixer：
```
module.exports = {
  plugins: {
    autoprefixer: {},
  },
};
```
该配置会让Autoprefixer自动读取package.json中的browserslist规则。若需直接在配置内指定浏览器规则，可改为：
```
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        "last 3 versions",
        "> 1%",
        "not dead"
      ]
    },
  },
};
```
验证生产构建结果
Autoprefixer默认在开发模式（next dev）下不生成前缀，优先保障编译速度。需运行next build构建生产版本，再检查输出的CSS文件是否包含预期前缀（如-webkit-、-moz-等）。
确认CSS模块处理流程
Next.js的CSS模块（.module.scss）会自动经过PostCSS处理，只要上述配置正确，前缀会自动添加到编译后的CSS模块代码中，无需修改现有导入方式。