uni-app 发行打包后，rpx转化后出现乱码

uni-app 发行打包后，rpx转化后出现乱码

操作步骤：

.rain{
background-color: red;
font-size: 200rpx;
}

预期结果：

.rain[data-v-5ebefdd5]{
background-color:red;
font-size:200px;
}

实际结果：

.rain[data-v-5ebefdd5]{
background-color:red;
font-size:%?200?%
}

bug描述：

@import '../../../common/uni-nvue.css';
.rain{
background-color: red;
font-size: 200rpx;
}
style标签的最后一项中如果含有单位rpx,转换后会出现乱码
信息类型 信息
产品分类 HbuilderX
PC开发环境 Windows
PC开发环境版本 windows7
HBuilderX版本 3.1.11

log.rar

hellorar


更多关于uni-app 发行打包后，rpx转化后出现乱码的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 发行打包后，rpx转化后出现乱码的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 uni-app 编译时 CSS 处理问题，主要出现在特定版本的 HBuilderX 中。当样式文件末尾包含 rpx 单位时，编译过程可能因编码解析错误导致单位转换异常，生成类似 %?200?% 的乱码。

问题原因：
CSS 预处理器在解析 @import 引入文件后，若结尾样式规则包含 rpx 单位，可能因字符编码或正则匹配错误，未能正确转换为 px。

解决方案：

  1. 升级 HBuilderX：此问题在后续版本已修复，建议升级至最新稳定版（当前为 3.6+）
  2. 临时规避：
    • 在含 rpx 的样式后添加空规则（如 .dummy{}）
    • 或将 rpx 单位移至非末尾位置
  3. 检查编码格式：确保 CSS 文件为 UTF-8 无 BOM 格式

修正示例：

.rain{
  font-size: 200rpx;
  background-color: red; /* 调整属性顺序 */
}
.dummy{ /* 或追加空规则 */ }
回到顶部