reactjs - 如何在 ViteJS 和 React 中使用 autoprefixer？

Question

我将 React 与 ViteJS 和 SASS 一起使用，但我遇到了问题。当我构建项目时，似乎没有 CSS/SCSS 的自动前缀。

如何使用 ViteJS 和 SASS 添加自动前缀？

Answer 1

添加postcss和autoprefixer:yarn add -D postcss@latest autoprefixer@latest

然后在您的根项目目录中添加一个文件postcss.config.js:

module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

ℹ️ 您可以在下面找到一个没有 postcss 配置文件的新项目的 vite.config.ts 示例。

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

export default defineConfig({
  plugins: [
    react()
  ],
  css: {
    postcss: {
      plugins: [
        autoprefixer({}) // add options if needed
      ],
    }
  }
})

如果它仍然不起作用，请提供一个可重现的项目。