问:为什么用 postcss-px-to-viewport-update 而不是 postcss-px-to-viewport ?
答:因为px2vw官方npm中的 include 配置不生效T______T
项目技术栈是react + umi + dva,所以在 .umirc.ts 中配置,其它能使用webpack的项目也差不多配置。
import { defineConfig } from 'umi';
import postCssPxToViewport from 'postcss-px-to-viewport-update';
// 为什么用postcss-px-to-viewport-update而不是postcss-px-to-viewport
// https://github.com/evrone/postcss-px-to-viewport/issues/53
export default defineConfig({
extraPostCSSPlugins: [
postCssPxToViewport({
unitToConvert: 'px',
viewportWidth: 1920, //视窗的宽度,对应我们设计稿的宽度,一般指retina(一个点两个像素),宽度1920(常见大屏页面设计稿)
// viewportHeight: 1080, //视窗的高度,对应我们设计稿的高度,可以不配置
unitPrecision: 5, //指定`px`转化成视窗单位值的小数位数(很多时候不能整除)
viewportUnit: 'vw', //指定需要转换的视窗单位 建议'vw'
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位
selectorBlackList: [],
exclude: [], // 设置忽略文件,用正则做目录名匹配
include: [/reportBigScreen/],
replace: true, // 是否转换后直接更换属性值
minPixelValue: 1, //小于或者等于1px不转换为视窗单位
mediaQuery: false, //允许在媒体查询中转换'px'
landscape: false, // 是否处理横屏情况
}),
postCssPxToViewport({
unitToConvert: 'px',
viewportWidth: 375, //宽度375或者750(常见移动版页面设计稿)
unitPrecision: 5,
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: [],
exclude: [],
include: [/reportMobileScreen/],
replace: true,
minPixelValue: 1,
mediaQuery: false,
landscape: false,
}),
],
});