九千胜
九千胜
  • 发布:2024-05-01 11:21
  • 更新:2024-05-06 08:58
  • 阅读:78

【报Bug】uni-app项目使用less编译的span相关样式都被编译成了._span类的样式,编译后span样式丢失

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10企业版LTSC [ 版本1809(操作系统内部版本 17763.5696) ]

HBuilderX类型: 正式

HBuilderX版本号: 4.14

第三方开发者工具版本号: Stable 1.06.2306020

基础库版本号: 3.4.3

项目创建方式: HBuilderX

示例代码:
<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>

操作步骤:
  1. 新建uni-app默认项目,vue版本选择vue2。在新建项目pages/index/index.vue页面默认例子里的代码
    <text class="title">{{title}}</text>

    下面添加新内容

    <span>测试一下</span>
  2. 将页面样式改为less编译,范围改为scoped,将其中的样式改为less编译所需语法。
  3. 在.text-area下添加span相关样式
  4. 在微信开发者工具中运行该例子

预期结果:
<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;  
}

bug描述:

HbuilderX工具更新以后,原本的vue2版本项目运行出现了异常。

在vue文件中使用了less编译的样式,所有span标签相关样式都被编译成了._span类样式,导致span相关样式无法正常渲染。

2024-05-01 11:21 负责人:无 分享
已邀请:
QK_MesSent

QK_MesSent

同个问题 +1

  • 九千胜 (作者)

    该bug已经确认,不过标题没有我这个这么明显。你可以关注一下被确认的这个。https://ask.dcloud.net.cn/question/190418

    2024-05-06 22:06

  • QK_MesSent

    回复 九千胜: 蟹蟹~

    2024-05-10 11:18

要回复问题请先登录注册