Nuxt.js 3 如何开启 autoprefixer 自动补全 css 浏览器前缀？

发布者：前端集合 // 发布时间：2024-08-20 22:07:00 // 分类：经验记录 // 访问: 317 次 // 热度:

第一步

在根目录 package.json 加入：

里面的内容也可以去网上查询，自己自定义。

"browserslist": [
    "> 1%",
    "not dead",
    "last 3 version",
    "Chrome >= 60",
    "Edge >= 15",
    "Safari >= 10",
    "Firefox >= 54",
    "Opera >= 38",
    "iOS >= 10",
    "Android >= 5",
    "not IE <= 11"
  ]

第二步安装

npm install postcss-preset-env --save-dev

第三步配置

在 nuxt.config.ts 加入如下配置：

postcss: {
    plugins: {
      'postcss-preset-env': {
        autoprefixer: {},
      },
    },
},

随便在 css 里写个 display: flex, 即可看到补全后的效果：

display: -webkit-box;
display: -ms-flexbox;
display: flex;

Tags: nuxt, nuxt.js, nuxt3