lkxian888
commented
11 months ago 图片中红色框选的无法被转换。样式类中的都可以被转换。
结果预览：
以下是我的配置： nodejs : v18.18.2
"vite": "^5.0.0", "postcss-px-to-viewport-8-plugin": "^1.2.3",
postcss.config.js export default { plugins: { tailwindcss: {}, autoprefixer: {}, "postcss-px-to-viewport-8-plugin": { viewportWidth: 375, // 设计稿的视口宽度 unitToConvert: "px", // 需要转换的单位，默认为"px" // exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件 // include: [/node_modules/@vant//], // 包含匹配某些文件夹下的文件或特定文件 unitPrecision: 4, // 单位转换后保留的精度(保留的小数点后几位) propList: ["*"], // 能转化为vw的属性列表 viewportUnit: "vw", // 希望使用的视口单位 fontViewportUnit: "vw", // 字体使用的视口单位 selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。 // minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换 mediaQuery: false, // 媒体查询里的单位是否需要转换单位 replace: true, // 是否直接更换属性值，而不添加备用属性 landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: "vw", // 横屏时使用的单位 landscapeWidth: 1920, // 横屏时使用的视口宽度 }, }, };
不支持行内样式
Listen-to-poetry-in-the-wind
ImPigerla
图片中红色框选的无法被转换。样式类中的都可以被转换。
结果预览：
以下是我的配置： nodejs : v18.18.2
"vite": "^5.0.0", "postcss-px-to-viewport-8-plugin": "^1.2.3",
postcss.config.js export default { plugins: { tailwindcss: {}, autoprefixer: {}, "postcss-px-to-viewport-8-plugin": { viewportWidth: 375, // 设计稿的视口宽度 unitToConvert: "px", // 需要转换的单位，默认为"px" // exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件 // include: [/node_modules\/@vant\//], // 包含匹配某些文件夹下的文件或特定文件 unitPrecision: 4, // 单位转换后保留的精度(保留的小数点后几位) propList: ["*"], // 能转化为vw的属性列表 viewportUnit: "vw", // 希望使用的视口单位 fontViewportUnit: "vw", // 字体使用的视口单位 selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。 // minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换 mediaQuery: false, // 媒体查询里的单位是否需要转换单位 replace: true, // 是否直接更换属性值，而不添加备用属性 landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: "vw", // 横屏时使用的单位 landscapeWidth: 1920, // 横屏时使用的视口宽度 }, }, };