viewports适配， vant的参考尺寸是 375， 设计稿的尺寸是750， 如何在vite配置postcss-px-to-viewport

[avenir-zhang]

你好，请使用下面的链接创建 issue 以帮助我们更快的排查问题，不规范的 issue 会被关闭，感谢配合。

http://vant-contrib.gitee.io/vant-issue-generater

---

Please use the link below to create a new issue, the non-standard issue will be closed.

https://youzan.github.io/vant-issue-generater

[chenjiahan]

[avenir-zhang]

@chenjiahan 这中写法只能适用用 px2rem, postcss-px-to-viewport 该怎么 配置呢

[chenjiahan]

px-to-viewport 没支持，可以带他们提需求

[avenir-zhang]

px-to-viewport 没支持，可以带他们提需求

px2rem 使用 lib-flexible 有坑， 目前遇到的 华为P40，html 的宽度 大于屏幕宽度

[enpitsuLin]

生产上遇到过需要配置px2vh的，其实百度也能搜到这个

const path = require('path');

module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
  return {
    plugins: {
      'postcss-px-to-viewport': {
        unitToConvert: 'px',
        viewportWidth: designWidth, //设计图视口宽度 按IOS标准点@1x
        unitPrecision: 3,
        propList: ['*'],
        viewportUnit: 'vw',
        fontViewportUnit: 'vw',
        selectorBlackList: ['.ignore'],
        minPixelValue: 1,
        mediaQuery: false,
        replace: true,
        exclude: [],
        landscape: false,
        landscapeUnit: 'vw',
        landscapeWidth: 1628 //视口高度
      }
    }
  };
};

[caixingorg]

生产上遇到过需要配置px2vh的，其实百度也能搜到这个

const path = require('path');

module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
  return {
    plugins: {
      'postcss-px-to-viewport': {
        unitToConvert: 'px',
        viewportWidth: designWidth, //设计图视口宽度 按IOS标准点@1x
        unitPrecision: 3,
        propList: ['*'],
        viewportUnit: 'vw',
        fontViewportUnit: 'vw',
        selectorBlackList: ['.ignore'],
        minPixelValue: 1,
        mediaQuery: false,
        replace: true,
        exclude: [],
        landscape: false,
        landscapeUnit: 'vw',
        landscapeWidth: 1628 //视口高度
      }
    }
  };
};

这个是 webpack 构建的 不是vite

[Deeyu]

生产上遇到过需要配置px2vh的，其实百度也能搜到这个

const path = require('path');

module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
  return {
    plugins: {
      'postcss-px-to-viewport': {
        unitToConvert: 'px',
        viewportWidth: designWidth, //设计图视口宽度 按IOS标准点@1x
        unitPrecision: 3,
        propList: ['*'],
        viewportUnit: 'vw',
        fontViewportUnit: 'vw',
        selectorBlackList: ['.ignore'],
        minPixelValue: 1,
        mediaQuery: false,
        replace: true,
        exclude: [],
        landscape: false,
        landscapeUnit: 'vw',
        landscapeWidth: 1628 //视口高度
      }
    }
  };
};

这个是 webpack 构建的 不是vite

解决了吗

[wananzys]

请问现在有vite适配vant的postcss-px-to-viewport方案了吗

[xingfb]

`//

/** vite中配置postcss-px-to-viewport
在vite.config.ts 或 vite.config.js编写以下代码
以下配置只能将vant的px转为vw，
暂时无法像 webpack配置中
const designWidth = file.dirname.includes（path.join（'node_modules'， 'vant'）） ？ 375 ： 750;这样
既能转化375的，又能转750
也欢迎各路大神指点迷津
*/

引入postcsspxtoviewport
import postcsspxtoviewport from 'postcss-px-to-viewport';

export default defineConfig（{
...... // 其他的配置
css： {
postcss： {
plugins： [
postcsspxtoviewport（{
unitToConvert： 'px'，
viewportWidth： 375， // 此处375是vant的设计稿尺寸，想转化375、750该想功能还在研究
unitPrecision： 6，
propList： ['']，
viewportUnit： 'vw'，
fontViewportUnit： 'vw'，
selectorBlackList： ['ignore-']，
minPixelValue： 1，
mediaQuery： true，
replace： true，
// exclude： [/node_modules/]，
exclude： []，
landscape： false
})
]
}
}
});`

[xingfb]

请问现在有vite适配vant的postcss-px-to-viewport方案了吗

可参考该位大神的内容：https://juejin.cn/post/6961737808339795975

[Deeyu]

使用cnjm-postcss-px-to-viewport这个插件
'cnjm-postcss-px-to-viewport': {
unitToConvert: 'px', // 要转化的单位
viewportWidth: 750, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度，即小数点位数
propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
selectorBlackList: ['ignore'], // 指定不转换为视窗单位的类名，
minPixelValue: 2, // 默认值1，小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否转换后直接更换属性值
exclude: [], // 设置忽略文件，用正则做目录名匹配
landscape: false, // 是否处理横屏情况
// 如果没有使用其他的尺寸来设计，下面这个方法可以不需要，比如vant是375的
customFun: ({ file }) => {
// 这个自定义的方法是针对处理vant组件下的设计稿为375问题
const designWidth = path.join(file).includes(path.join('node_modules', 'vant'))
? 375
: 750
return designWidth
},
},