uni-app项目使用less编译时 span相关样式被编译成._span类样式 编译后span样式丢失

uni-app项目使用less编译时 span相关样式被编译成._span类样式 编译后span样式丢失

开发环境 版本号 项目创建方式
Windows win10企业版LTSC [ 版本1809(操作系统内部版本 17763.5696)] HBuilderX

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

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

预期结果：

<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;  
}

更多关于uni-app项目使用less编译时 span相关样式被编译成._span类样式 编译后span样式丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

同个问题 +1

更多关于uni-app项目使用less编译时 span相关样式被编译成._span类样式 编译后span样式丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


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

回复 九千胜: 蟹蟹~

在 uni-app 项目中使用 Less 编译时，如果 span 相关的样式被编译成 ._span 类样式，导致样式丢失，通常是因为 Less 编译器对标签选择器的处理方式导致的。以下是可能的原因和解决方案：

问题原因

  1. Less 编译器对标签选择器的处理： Less 编译器在某些情况下会将标签选择器（如 span）编译成类选择器（如 ._span），尤其是在使用了某些插件或配置时。

  2. 样式作用域问题： 如果项目启用了样式作用域（如 Vue 单文件组件的 scoped 样式），标签选择器可能无法正确应用到目标元素。

解决方案

1. 检查 Less 编译配置

确保 Less 编译器的配置没有将标签选择器强制转换为类选择器。检查 vue.config.js 或 webpack.config.js 中的相关配置。

2. 使用全局样式

如果样式作用域导致问题，可以将 span 相关的样式放到全局样式文件中（如 App.vue 或 common.less），而不是在 scoped 样式中定义。

/* 全局样式文件（如 common.less） */
span {
  color: red;
}

或者在 App.vue 中引入全局样式：

<style lang="less">
@import './common.less';
</style>

3. 使用类选择器

避免直接使用标签选择器，改用类选择器或 ID 选择器。这样可以避免样式作用域和编译器处理的问题。

.my-span {
  color: red;
}

在模板中使用：

<template>
  <span class="my-span">Hello</span>
</template>

4. 检查样式作用域

如果使用了 scoped 样式，确保标签选择器的样式能够正确应用。可以通过 >>> 或 /deep/ 穿透样式作用域。

/* Vue 2 */
/deep/ span {
  color: red;
}

/* Vue 3 */
:deep(span) {
  color: red;
}
回到顶部