PostCSS另一种css兼容处理方式（支持nuxt3）：postcss-preset-env

前言

以前使用PostCSS做css兼容性处理，常常就是使用autoprefixer做个浏览器前缀处理就完事了，但是实际上如果真要实现所谓的兼容性处理，css甚至还需要做转换处理，类似于js的async...await的语法转换处理。

autoprefixer只是自动添加浏览器前缀，而本次使用的postcss-preset-env除了自动添加浏览器前缀，并且会根据目标浏览器自动转换成兼容的格式，包含许多其他 CSS 提案的 polyfill。

举个例子：

:root {
    --main-color: #06c;
}

body {
    color: var(--main-color);
    display: grid;
}

使用autoprefixer得到如下：

:root {
    --main-color: #06c;
}

body {
    color: var(--main-color);
    display: -ms-grid;
    display: grid;
}

使用postcss-preset-env得到：

:root {
    --main-color: #06c;
}

body {
    color: #06c;
    color: var(--main-color);
    display: -ms-grid;
    display: grid;
}

可以看到有很经典的回退方案处理，这相对于只添加前缀，效果会好很多。

教程

安装依赖：

pnpm i postcss-preset-env -D

我使用的是vite，vite自己自带了PostCSS支持，所以我只需要在项目里创建postcss.config.js即可，其他情况请自行谷歌搜索，如何使用PostCSS。

由于新版的vite5其实已经是完全的es模块了，所以我的这个配置文件不在是node模块的形式导出，这点需要注意，可能你的项目还是老一点的，你需要自己改成node模块导出，也就是module.exports的形式。

import postcssPresetEnv from "postcss-preset-env";

export default {
    plugins: [postcssPresetEnv({
      autoprefixer: {
        grid: true
      }
    })]
};

grid默认不开启降级处理，需要单独配一下。

插件配置完毕后我们还需要配置一个浏览器支持列表，也就是.browserslistrc文件。

基于vite的支持，我之前的文章也有提供一份，这里直接也贴一份吧。

>0.3%
not dead
not op_mini all
last 3 version
Chrome >= 51
Edge >= 15
Safari >= 10
Firefox >= 54
Opera >= 38
iOS >= 10
Android >= 5
not IE <= 11

然后我们保存文件，重启项目即可享受。

nuxt3

nuxt3由于不读取.browserslistrc文件，这个浏览器配置我们需要配置到package.json文件中：

{
  "browserslist": [
      ">0.3%",
      "not dead",
      "not op_mini all",
      "last 3 version",
      "Chrome >= 51",
      "Edge >= 15",
      "Safari >= 10",
      "Firefox >= 54",
      "Opera >= 38",
      "iOS >= 10",
      "Android >= 5",
      "not IE <= 11"
  ]
}

当然依赖安装和上面一样，安装完毕后我们去nuxt.config.ts中配置postcss，由于nuxt3也已经内置了postcss支持，还内置了两个插件：

• autoprefixer：css增加浏览器前缀
• cssnano：css压缩

一般不用配置这两个，兼容处理我们使用 postcss-preset-env 就行了。

// nuxt.config.ts

export default defineNuxtConfig({
  postcss: {
    plugins: {
      "postcss-preset-env": {
        autoprefixer: {
            grid: true
        }
      }
    }
  }
})

这样就行了，重启一些项目就能看到nuxt3中的css也被做了兼容处理。