如何使用 vite + React 项目添加自动前缀

嗨，我使用创建了反应应用程序npm create vite我尝试整合autoprefixer但它不起作用。

vite.config.js

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

export default defineConfig({
    plugins: [react()],
    css: {
        postcss: {
            plugins: [autoprefixer()],
        },
    },
});

package.json

  "devDependencies": {
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.1.0",
    "autoprefixer": "^10.4.8",
    "postcss": "^8.4.16",
    "sass": "^1.54.9",
    "vite": "^3.1.0"
  },
  "browserslist": [ "last 2 versions", "not dead" ] 

我尝试创建一个postcss.config.js但它也不起作用。

postcss.config.js

import autoprefixer from 'autoprefixer';

export const plugins = {
    plugins: [autoprefixer()],
};

如果有人能帮助我，那就太好了！

Vite似乎使用postcss-load-config对于它的配置。

如果项目包含有效的 PostCSS 配置（任何支持的格式） postcss 加载配置，例如postcss.config.js)，它会自动 应用于所有导入的 CSS。https://vitejs.dev/guide/features.html#postcss

我解决了这个问题.postcssrc.json and a browserslist根键输入package.json.

首先安装自动前缀器npm install -D autoprefixer

postcss and postcss-load-config包含在 vite 中

不需要额外的配置vite.config.js，只是默认值：

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

export default defineConfig({
    plugins: [react()],
});

.postcssrc.json

{
  "map": true,
  "plugins": {
    "autoprefixer": {}
  }
}

使用其中之一设置浏览器列表推荐选项

package.json

{
  ...
  "devDependencies": {
    ...
    "autoprefixer": "^10.4.12",
  },
  "browserslist": [
    "defaults"
  ]
}

Result:

index.css

:root {
 ...
  text-size-adjust: 100%;
}

编译为：

:root {
  ...
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}