lkxian888/postcss-px-to-viewport-8-plugin

行内样式 <div style="font-size: 18px;"></div> 无法转换为vw,以及通过属性传递参数到组件中生成的样式也无法转换。

Closed this issue · 3 comments

图片中红色框选的无法被转换。样式类中的都可以被转换。

image

结果预览:
image

以下是我的配置:
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, // 横屏时使用的视口宽度
},
},
};

图片中红色框选的无法被转换。样式类中的都可以被转换。

image

结果预览: image

以下是我的配置: 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, // 横屏时使用的视口宽度 }, }, };

不支持行内样式

好的,以及找到问题所在了,原以为是无法转换的原因,,后来发现tailwindcss文档配置问题,导致类无法覆盖组件样式。

好的,以及找到问题所在了,原以为是无法转换的原因,,后来发现tailwindcss文档配置问题,导致类无法覆盖组件样式。

遇到一样的问题,如何配置解决?