vite使用了postcss导致index.html的样式也被转换了

前言

今天才发现，vite使用了postcss做px转换的时候，导致index.html写的style标签里面的样式也被转换了。

超级尴尬，导致静态loading的样式会大小变化一下，很难受。

解决的思路还是很简单的，有两种方式：

1. 添加class黑名单，这样对应的class就不会转换了；
2. 排除指定文件，该文件不会被转换；

我项目使用的是rem转换，vw的转换其实配置也差不多。

解决办法

rem插件postcss-pxtorem

配置postcss.config.js中postcss-pxtorem的配置：

module.exports = {
    plugins: {
        "postcss-pxtorem": {
            rootValue: 37.5,
            propList: ["*"],
            selectorBlackList: [], // 过滤掉指定class不进行rem转换
            exclude: ["/index.html"] // 排除指定文件
        }
    }
};

vm插件postcss-px-to-viewport-8-plugin

配置postcss.config.js

const postcssPxToViewport8Plugin = require("postcss-px-to-viewport-8-plugin");

module.exports = {
    plugins: [
        postcssPxToViewport8Plugin({
            viewportWidth: 375,
            unitPrecision: 6,
            unitToConvert: "px",
            propList: ["*"],
            selectorBlackList: [], // 过滤掉指定class不进行rem转换
            minPixelValue: 2,
            exclude: [/\/index.html/],  //注意这是正则
        }),
    ]
};

配置完毕记得重启项目。

事实上我感觉vw的其实不用排除，因为它不需要单独的js文件控制根标签font-size，所以其实不排除让它转换反倒更好了。