autoprefixer：自动添加浏览器样式前缀

安装

yarn add postcss -D
yarn add postcss-modules -D
yarn add postcss-flexbugs-fixes -D
yarn add autoprefixer -D

配置

1. vite.config.ts

import Autoprefixer from 'autoprefixer'
import PostcssFlexbugsFixes from 'postcss-flexbugs-fixes'
 css: {
        postcss: {
            plugins: [
                // 前缀追加
                Autoprefixer({
                    overrideBrowserslist: [
                        'Android 4.1',
                        'iOS 7.1',
                        'Chrome > 31',
                        'ff > 31',
                        'ie >= 8',
                        '> 1%'
                    ],
                    grid: true
                }),
                PostcssFlexbugsFixes(),
                {
                    postcssPlugin: 'internal:charset-removal',
                    AtRule: {
                        charset: (atRule: any) => {
                            if (atRule.name === 'charset') {
                                atRule.remove()
                            }
                        }
                    }
                }
            ]
        }
 }