autoprefixer自动添加css 前缀解决不同的浏览器的兼容问题

最新推荐文章于 2025-11-15 02:03:49 发布

原创最新推荐文章于 2025-11-15 02:03:49 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

文章介绍了如何在Vite项目中安装并配置autoprefixer插件，通过在vite.config.ts文件中设置postcss的plugins数组，添加autoprefixer，以自动处理CSS兼容性问题。配置项包括overrideBrowserslist，定义了支持的浏览器版本，以及开启grid支持。

1.安装

npm i autoprefixer

2.配置在vite.config.ts中进行配置

import autoprefixer from 'autoprefixer'

添加配置
  css: {
    postcss: { // 关键代码
        plugins: [
    
        autoprefixer({ // 自动添加前缀 的浏览器
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ie >= 8"
                //'last 2 versions', // 所有主流浏览器最近2个版本
            ],
            grid: true
        })
        ]
    },
  }

要在resolve的下面添加