如何在 ViteJS 和 React 中使用 autoprefixer？

Question

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

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

Answer 1

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

\n

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

\n

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

\n

vite.config.ts\xe2\x84\xb9\xef\xb8\x8f 您可以在下面找到一个没有 postcss 配置文件的新项目的示例。

\n

import { defineConfig } from "vite"\nimport react from '@vitejs/plugin-react'\nimport autoprefixer from 'autoprefixer'\n\nexport default defineConfig({\n  plugins: [\n    react()\n  ],\n  css: {\n    postcss: {\n      plugins: [\n        autoprefixer({}) // add options if needed\n      ],\n    }\n  }\n})\n

\n

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

\n