h5根据文件适配的问题

项目配置:
vue 2.x

目前项目的配置是rem适配、但是我习惯用于vw进行适配,所以通过postcss.config.js配置可以通过不同文件后缀的文件进行适配不同的单位名称、如下:

问题:引入三方的vant的时候 如何进行拦截处理呢? 有大佬有思路吗?现在所有的vant都进行了rem的适配

module.exports = (api) => {
  // 根据当前的 环境变量进行判断 适配方案、
  // 可以根据文件名后缀名进行拦截
  const _basename = api.file.basename.split('.')
  
  if(_basename.includes('vw')) {
    return {
      plugins:{
        'postcss-write-svg': {
          utf8: false, // 使用base64编码
        },
        'postcss-preset-env': {
          stage: 4, // 稳定阶段
        },
        'postcss-px-to-viewport': {
          unitToConvert: 'px', //需要转换的单位,默认为"px"
          viewportWidth: 750, // (Number) 视窗的宽度,对应的是我们设计稿的宽度,一般是750
          viewportHeight: 1334, // (Number) 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
          unitPrecision: 3, // (Number) 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
          viewportUnit: 'vw', // (String) 指定需要转换成的视窗单位,建议使用vw
          selectorBlackList: ['.ignore', /.van-*/], // (Array) 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名,注意:第三方UI库也要在此添加
          minPixelValue: 1, // (Number) 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
          mediaQuery: false, // (Boolean) 允许在媒体查询中转换`px`
          exclude: /(\/|\\)(node_modules)(\/|\\)/,
        },
      }
    }
  }
  return {
    // You can specify any options from https://postcss.org/api/#processoptions here
    plugins: {
      'postcss-pxtorem': {
        rootValue: 37.5,
        unitPrecision: 5,
        propList: ['*', '!font-size', '!line-height'],
        minPixelValue: 12
      }
    }
  };
};
阅读 2.4k
1 个回答

简单理解看了下,好像可以这样?maybe😂

const ifFileNameWithVant:Boolean=()=>false

if(_basename.includes('vw') || ifFileNameWithVant(api.file)) {}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题