如何在Vite+React项目中正确配置autoprefixer？

问题排查与修复步骤 #

1. 修正PostCSS配置文件格式 #

你当前的postcss.config.js存在格式错误：嵌套了多余的plugins层级，且未使用默认导出。修改为正确格式：

import autoprefixer from 'autoprefixer';

export default {
  plugins: [autoprefixer()]
};

2. 避免配置冲突 #

Vite的vite.config.js中如果配置了css.postcss，可能会覆盖postcss.config.js的设置，建议二选一：

• 方案一：删除vite.config.js里的css.postcss区块，仅通过postcss.config.js配置
• 方案二：在vite.config.js中直接指定Autoprefixer的浏览器规则，确保配置完整：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import autoprefixer from 'autoprefixer';

export default defineConfig({
    plugins: [react()],
    css: {
        postcss: {
            plugins: [
                autoprefixer({
                    overrideBrowserslist: ['last 2 versions', 'not dead']
                })
            ],
        },
    },
});

3. 验证生效逻辑 #

Autoprefixer仅会为需要前缀的CSS属性添加前缀，测试时可以写一些需要前缀的属性，比如：

.test-container {
  display: grid;
  place-items: center;
  gap: 1rem;
}

查看构建后的CSS文件（或浏览器开发者工具中的元素样式），确认是否生成-webkit-place-items: center这类前缀代码。

4. 确认依赖兼容性 #

你的依赖版本（Vite 3.1.0、Autoprefixer 10.4.8、PostCSS 8.4.16）相互兼容，无需调整版本。

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