We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
你好,我是vite/vue3/vant4/unocss项目,postcss.config.cjs配置如下, dev环境下vant样式都被混入了min,理想效果不对
/* eslint-disable no-undef */ module.exports = { plugins: [ require('cnjm-postcss-px-to-viewport')({ viewportWidth: 750, // 根据设计稿设定 unitPrecision: 4, // 转化精度,转换后保留位数 propList: ['*'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换 viewportUnit: 'vw', // 指定需要转换成的视窗单位,默认vw fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位,默认vw minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换 mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false replace: true, // 是否转换后直接更换属性值 include: [], exclude: [], // 设置忽略文件,用正则做目录名匹配 // 这个自定义的方法是针对处理vant组件下的设计稿为375问题 customFun: ({ file }) => { const judgeComponent = (file) => /vant/.test(file) const designWidth = judgeComponent(file) ? 375 : 750 return designWidth } }), // 视口处理,限制pc max-width效果 require('postcss-mobile-forever')({ // rootContainingBlockSelectorList: ['van-tabbar', 'van-popup'], // border: true, appSelector: '#app', // 根元素选择器,用于设置桌面端和横屏时的居中样式 // viewportWidth: 375, // 设计稿的视口宽度,可传递函数动态生成视图宽度 viewportWidth: (file) => (file.includes('node_modules/vant/') ? 375 : 750), unitPrecision: 3, // 单位转换后保留的精度(很多时候无法整除) maxDisplayWidth: 600, // 桌面端最大展示宽度 propList: [ '*' // '!font-size' ], // 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被转换 // 指定不转换为视口单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名 // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。 // 下面配置表示类名中含有'keep-px'以及'.ignore'类都不会被转换 selectorBlackList: ['.ignore', 'keep-px'], // 下面配置表示属性值包含 '1px solid' 的内容不会转换 valueBlackList: ['1px solid'], exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件 // include: [/src/], // 如果设置了include,那将只有匹配到的文件才会被转换 mobileUnit: 'vw', // 指定需要转换成的视口单位,建议使用 vw rootContainingBlockSelectorList: ['van-popup--bottom'] // 指定包含块是根包含块的选择器,这种选择器的定位通常是 `fixed`,但是选择器内没有 `position: fixed` }), // 自动添加前缀 require('autoprefixer')({ overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7'] }) ] }
我把插件的配置去掉后
The text was updated successfully, but these errors were encountered:
cnjm-postcss-px-to-viewport 和我的插件在不限制宽度的转换作用相同,把这个插件注释掉有效吗?
Sorry, something went wrong.
No branches or pull requests
你好,我是vite/vue3/vant4/unocss项目,postcss.config.cjs配置如下, dev环境下vant样式都被混入了min,理想效果不对
postcss.config.cjs
移动端
PC端
理想情况
我把插件的配置去掉后
The text was updated successfully, but these errors were encountered: