postcss-px-to-viewport易错点

1. 插件的下载

pnpm add postcss  postcss-px-to-viewport -D

创建postcss.config.cjs文件，并且添加内容

module.exports = {
    plugins: {
        'postcss-px-to-viewport': {
            unitToConvert: 'px',
            viewportWidth: 375, // 设计稿宽度
            unitPrecision: 5, // 视口单位的小数位数
            propList: ['*'], // 要转换的属性列表，设置为 '*' 表示转换所有属性
            viewportUnit: 'vw',
            fontViewportUnit: 'vw', // 字体使用的视口单位
            selectorBlackList: [], // 不进行转换的选择器列表
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            exclude: undefined,
            include: undefined,
            landscape: false
        }
    }
};

易错点

如果样式写成行内形式，发现无法将px转换为视口单位

<img :src="huomiao" style="width:14px; height: 14px;">

原因：PostCSS 插件主要是在构建过程中对 CSS 文件进行解析和转换。它们会读取项目中的 CSS 文件内容，按照配置规则对其中的 px 单位进行替换操作。然而，行内样式是直接写在 HTML 标签的 style 属性里的，并没有以独立的 CSS 文件形式存在，所以插件在处理时无法直接对其进行解析和转换。