问题详情描述

使用vite开发基于vant的vue3 h5业务项目

安卓机透明度失效

原因

// 源码定义less
box-shadow:0 2px 8px rgba(0,0,0,.2);

// 打包后的css
box-shadow:0 2px 8px 0 #0003;
复制代码

其实就是代码内的rgba被编译成hex格式了，而这种格式在x5内核下是不支持的。

解决

// vite.config.js
// 增加target，让esbuild保证兼容性
module.exports = {
  build: {
    cssTarget: 'chrome61',
  }
}

// 源码less
box-shadow:0 2px 8px rgba(0,0,0,.2);

// 打包后的css
box-shadow:0 2px 8px rgba(0,0,0,.2);