uni-app 升级到 HbuilderX 3.4.10 后样式错乱

uni-app 升级到 HbuilderX 3.4.10 后样式错乱

开发环境 版本号 项目创建方式
Windows windows 10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：windows 10

HBuilderX类型：Alpha

HBuilderX版本号：3.4.10

手机系统：Android

手机系统版本号：Android 12

手机厂商：小米

手机机型：小米11 Ultra

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 操作步骤：


样式 a
```css
view {  
    display: flex;  
    flex-direction: column;  
}

样式 b

.test {  
    display: flex;  
}

App.vue 引用样式 b

[@import](/user/import) '@/common/b.scss';

组件 test 引用样式 a

<template>  
    <view>  
        <view>  
            <view>component 1</view>  
            <view>component 2</view>  
            <view>component 3</view>  
        </view>  
        <slot></slot>  
    </view>  
</template>  

<style lang="scss" scoped>  
    [@import](/user/import) '@/common/a.scss';  
</style>

index.vue 页面

<template>  
    <view>  
        <test>  
            <view class="test">  
                <view>index 1</view>  
                <view style="margin:0 10px;">index 2</view>  
                <view>index 3</view>  
            </view>  
        </test>  
    </view>  
</template>

预期结果：

class=“test” 显示的是横向排列 希望和 HbuilderX 3.4.9 版本样式显示一样


### 实际结果：


HbuilderX 3.4.9   class="test"  显示的是横向排列
HbuilderX 3.4.10 class="test"  显示的是纵向排列

bug描述：

从 HbuilderX 3.4.9 升级到 HbuilderX 3.4.10 后样式错乱了， 测试发现可能是 组件的scoped有问题，样式不生效


更多关于uni-app 升级到 HbuilderX 3.4.10 后样式错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html

15 回复

来了

更多关于uni-app 升级到 HbuilderX 3.4.10 后样式错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html


bug 确认，已加分，即将修复

没人遇到这个问题么？ 两个版本呈现效果不一致这不是bug么？

3.4.11 一样有问题，这个还能不能解决了？

3.4.12 了 ，BUG 依旧存在

3.4.13.20220601-alpha，BUG 依旧存在 bug横跨4个版本了，没人处理真实服了

测试 发现是 小程序组件设置scoped 后，只有里面节点会添加 data-v-xxx，而 slot 节点不会加data-v-xxx 但是app 一锅端的全部都加data-v-xxx，slot 也加data-v-xxx <view class="css">
<view slot="title"></view>
</view> 小程序生成的是：
<view class="css" data-v-1c4434ae>
<view></view>
</view> app 生成的是：
<view class="css" data-v-1c4434ae>
<view data-v-1c4434ae></view>
</view> BUG 原因我都找出得清清楚楚了为什么就没人理会呢？

以后可以先艾特我

升级到3.4.14 页面弹窗样式全变了

我也是啊 他妈的坑啊

解决了吗

HBuilderX 3.4.15 已修复

HBuilderX 3.4.14打包样式也出现错乱了

回复 x***@163.com: HBuilderX 3.4.15 已修复

在将 uni-app 项目升级到 HbuilderX 3.4.10 后出现样式错乱的问题，可能是由于以下原因导致的。以下是一些常见的排查和解决方法：

1. 检查 rpx 单位的使用

uni-app 默认使用 rpx 作为响应式单位。如果你在样式中使用了 px，可能会导致布局错乱。建议：

  • 将所有 px 替换为 rpx。
  • 确保 rpx 的转换比例正确（默认 750rpx = 100% 屏幕宽度）。

2. 检查 CSS 作用域

uni-app 中，组件的样式默认是全局的，可能会导致样式污染。建议：

  • 在组件的 <style> 标签中添加 scoped 属性，确保样式仅作用于当前组件。
    <style scoped>
.example {
  color: red;
}
</style>

3. 检查编译器版本

HbuilderX 3.4.10 可能更新了编译器的行为，导致样式解析不一致。建议：

  • 检查项目的编译器版本是否与 HbuilderX 版本匹配。
  • 尝试更新或回滚编译器版本：
    • 在 manifest.json 中检查 vue 或 vite 的版本。
    • 如果需要回滚，可以在 package.json 中指定特定版本。

4. 检查 v-if 和 v-show 的使用

如果样式错乱出现在动态渲染的组件中，可能是 v-if 或 v-show 的使用问题。建议：

  • 确保 v-if 和 v-show 的逻辑正确。
  • v-if 会销毁和重新创建组件，可能导致样式丢失，而 v-show 只是切换显示状态。

5. 检查全局样式污染

如果在项目中使用了全局样式（如 App.vue 中的样式），可能会影响其他组件。建议：

  • 避免在全局样式中使用过于泛化的选择器（如 * 或 div）。
  • 使用更具体的选择器或命名空间。

6. 检查第三方库的兼容性

如果项目中使用了第三方 UI 库（如 uView 或 Vant），可能是库的版本与 HbuilderX 3.4.10 不兼容。建议：

  • 检查第三方库的版本，确保其支持 uni-app 的最新版本。
  • 更新或回滚第三方库的版本。

7. 清除缓存并重新编译

HbuilderX 的缓存可能导致样式问题。建议：

  • 清除 HbuilderX 的缓存：
    • 关闭 HbuilderX，删除 unpackage 和 node_modules 文件夹，然后重新安装依赖并编译。
  • 重新编译项目：
    • 在 HbuilderX 中点击菜单栏的 运行 -> 运行到小程序 或 运行到浏览器。

8. 检查平台差异

uni-app 支持多平台（如小程序、H5、App），不同平台的样式渲染可能不一致。建议：

  • 在 pages.json 或 manifest.json 中检查平台特定的样式配置。
  • 使用条件编译针对不同平台调整样式：
    /* #ifdef H5 */
.example {
  color: blue;
}
/* #endif */
回到顶部