uni-app 升级3.1后全局css类的会被页面同名类覆盖 无法继承属性

uni-app 升级3.1后全局css类的会被页面同名类覆盖 无法继承属性

开发环境 版本号 项目创建方式
Mac macOS Big Sur 11.1 HBuilderX

示例代码:

示例代码:

app.vue 代码
<script>  
    export default {  
        onLaunch: function() {  
            const domModule = uni.requireNativePlugin('dom')  
            domModule.addRule('fontFace', {  
                'fontFamily': 'iconfont',  
                'src': "url('http://at.alicdn.com/t/font_923822_ayazhyhyohm.ttf')"  
            });  
            console.log('App Launch')  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }  
</script>  

<style>  
    /*全局图标类*/  
    .bicon {  
        font-family: iconfont;  
        font-size: 16px;  
    }  
</style>  
index.nvue
<template>  
    <view style="padding: 40px;" @click="navGoto">  
        <text class="bicon">&#xe623;</text>  
    </view>  
</template>  

<script>  
    export default {  
        methods: {  
            navGoto() {  
                uni.navigateTo({  
                    url: '/pages/index/test',  
                })  
            }  
        }  
    };  
</script>  

<style lang="scss" scoped>  
</style>  
test.nvue
<template>  
    <view style="padding: 40px;" @click="navGoto">  
        <text class="bicon">&#xe623;</text>  
    </view>  
</template>  

<script>  
    export default {  
        methods: {  
            navGoto() {  
                uni.navigateTo({  
                    url: '/pages/index/index',  
                })  
            }  
        }  
    };  
</script>  

<style lang="scss" scoped>  
    // 新版本可以写子类了,这样是生效的  
    // .bicon {  
    //  &;.big{  
    //      font-size: 40px;  
    //  }  
    // }  
    // 这样写会覆盖掉app.vue的bicon类,导致图标不显示  
    .bicon {  
        font-size: 40px;  
    }  
</style>  

### 操作步骤:


#### 操作步骤:

- css全局类写法已经失效了

预期结果:

预期结果:

  • css全局类写法已经失效了

### 实际结果:


#### 实际结果:

- css全局类写法已经失效了

bug描述:

bug描述:

升级到3.1后,之前3.0.7在app.vue里面写的css类可以作用于全局,其他页面可以给全局类修改和添加新的属性,但是3.1如果复写了全局类,就会覆盖掉全局类,使全局类里面的属性失效。

不知道这算不算bug,还是说新的要求css全局类不能被继承修改了。


更多关于uni-app 升级3.1后全局css类的会被页面同名类覆盖 无法继承属性的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

问题确认,已加分,后续修复

更多关于uni-app 升级3.1后全局css类的会被页面同名类覆盖 无法继承属性的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HBuilderX 3.1.1 已修复 另外新版样式编译模式默认关闭了:https://ask.dcloud.net.cn/article/38751

这是一个uni-app 3.1版本的样式继承问题。在3.1版本中,页面级样式会完全覆盖全局样式,而不是像3.0.7版本那样可以继承和扩展全局样式。

解决方案:

  1. 对于需要修改全局样式的场景,建议使用新的CSS变量方式:
.bicon {
    font-family: iconfont;
    font-size: var(--bicon-size, 16px);
}

然后在页面中修改变量值:

.bicon {
    --bicon-size: 40px;
}
  1. 或者使用!important强制优先级:
.bicon {
    font-family: iconfont !important;
    font-size: 16px;
}
回到顶部