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

Question

您好，我使用创建了反应应用程序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()],
};

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

Answer 1

Vite 似乎用于postcss-load-config其配置。

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

我用中的根密钥.postcssrc.json解决了这个问题。browserslistpackage.json

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

postcss并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"
  ]
}

结果：

index.css

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

编译为：

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