vw布局适配vant之 postcss.config.js 的配置

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,
        unitPrecision: 5,
        propList: ['*'],
        viewportUnit: 'vw',
        fontViewportUnit: 'vw',
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: false,
        exclude: /(\/|\\)(node_modules)(\/|\\)/,
        include: undefined,
        landscape: false,
        landscapeUnit: 'vw',
        landscapeWidth: 568
      }
    }
  }
}

 

 

最近遇到情况, 在vue3中使用vant, 使用这个配置项居然报错了, 大概意思是不知道  includes 这个方法, 以前在vue2中挺好的

所以使用 对于使用 vue3 + webpack的朋友, 使用如下配置就 ok

 

// const path = require('path')

module.exports = ({ file }) => {
  console.log(file, 'file')
  const isVant = file && file.dirname && file.dirname.indexOf('vant') > -1

  return {
    plugins: {
      'postcss-px-to-viewport': {
        unitToConvert: 'px',
        viewportWidth: isVant ? 375 : 750,
        unitPrecision: 5,
        propList: ['*'],
        viewportUnit: 'vw',
        fontViewportUnit: 'vw',
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: false,
        exclude: /(\/|\\)(node_modules)(\/|\\)/,
        include: undefined,
        landscape: false,
        landscapeUnit: 'vw',
        landscapeWidth: 568
      }
    }
  }
}