<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
<span>测试一下</span>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
>.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
>.text-area {
display: flex;
justify-content: center;
>.title {
font-size: 36rpx;
color: #8f8f94;
}
>span{
color: #f0f0f0;
}
}
}
</style>

- 发布:2024-05-01 11:21
- 更新:2024-05-06 08:58
- 阅读:171
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10企业版LTSC [ 版本1809(操作系统内部版本 17763.5696) ]
HBuilderX类型: 正式
HBuilderX版本号: 4.14
第三方开发者工具版本号: Stable 1.06.2306020
基础库版本号: 3.4.3
项目创建方式: HBuilderX
示例代码:
操作步骤:
- 新建uni-app默认项目,vue版本选择vue2。在新建项目pages/index/index.vue页面默认例子里的代码
<text class="title">{{title}}</text>
下面添加新内容
<span>测试一下</span>
- 将页面样式改为less编译,范围改为scoped,将其中的样式改为less编译所需语法。
- 在.text-area下添加span相关样式
- 在微信开发者工具中运行该例子
- 新建uni-app默认项目,vue版本选择vue2。在新建项目pages/index/index.vue页面默认例子里的代码
<text class="title">{{title}}</text>
下面添加新内容
<span>测试一下</span>
- 将页面样式改为less编译,范围改为scoped,将其中的样式改为less编译所需语法。
- 在.text-area下添加span相关样式
- 在微信开发者工具中运行该例子
预期结果:
<span>测试一下</span>
.content > .text-area > span {
color: #f0f0f0;
}
或者(HBuildX 4.08编译结果)
<label class="_span">测试一下</label>
.content > .text-area > ._span {
color: #f0f0f0;
}
<span>测试一下</span>
.content > .text-area > span {
color: #f0f0f0;
}
或者(HBuildX 4.08编译结果)
<label class="_span">测试一下</label>
.content > .text-area > ._span {
color: #f0f0f0;
}
实际结果:
<span>测试一下</span>
.content > .text-area > ._span {
color: #f0f0f0;
}
<span>测试一下</span>
.content > .text-area > ._span {
color: #f0f0f0;
}
bug描述:
HbuilderX工具更新以后,原本的vue2版本项目运行出现了异常。
在vue文件中使用了less编译的样式,所有span标签相关样式都被编译成了._span类样式,导致span相关样式无法正常渲染。
九千胜 (作者)
该bug已经确认,不过标题没有我这个这么明显。你可以关注一下被确认的这个。https://ask.dcloud.net.cn/question/190418
2024-05-06 22:06
QK_MesSent
回复 九千胜: 蟹蟹~
2024-05-10 11:18