Vite构建下安卓机器透明度失效

因业务场景不适合公开，以下截图为模拟效果

问题背景

在开发新的业务项目时，想试着将底层构建工具由webpack切换为vite。因为此次切换计划能让老项目也跑起来，所以仍使用vue2。配合vite-plugin-vue2，在开发时没遇到严重的问题，但在发布环境时遇到了在安卓机器微信中遇到了透明度失效的问题，需要排查透明度失效问题

项目简介

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

包名	版本号
vite	2.5.10
vue	2.6.14
vite-plugin-vue2	1.8.2
@vitejs/plugin-legacy	1.5.3
vant	2.12.35

遇到问题

弹窗遮罩无效
投影失效

定位问题

无意间检查实际的css，会发现颜色不是正常的rgba

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

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

这里其实就是代码内的rgba被编译成hex格式了，而这种格式在x5内核下是不支持的。那就需要从源码内查出是哪里进行了css编译

vite css编译源码

在处进行debugger，发现其实是esbuild处理css时，进行了此转换

// css.ts
import { transform, formatMessages } from 'esbuild' // 45行
/**
 * 省略中间代码
 */
const { code, warnings } = await transform(css, {  // 906行
  loader: 'css',
  minify: true,
  target: config.build.target || undefined
})

搜索发现esbuild更新说明

如何解决

那么根据文档，只需指定对应的target，这样就会根据target来确保代码兼容性。根据文档，在vite配置里设置target为chrome51，此时编译结果不会将rgba转换为hex。

文档已更新，需参考cssTarget

esbuild target
~~vite target~~ vite csstarget

// 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);

线上效果

Vite构建下安卓微信透明度失效