h5根据文件适配的问题

  • Z时代
  • 2024-02-18
  • 分类：IT

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
      }
    }
  };
};

回答：

简单理解看了下，好像可以这样？maybe?

const ifFileNameWithVant:Boolean=()=>false
if(_basename.includes('vw') || ifFileNameWithVant(api.file)) {}

以上是 h5根据文件适配的问题 的全部内容， 来源链接： utcz.com/p/936205.html

回到顶部