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"></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"></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版本那样可以继承和扩展全局样式。
解决方案:
- 对于需要修改全局样式的场景,建议使用新的CSS变量方式:
.bicon {
font-family: iconfont;
font-size: var(--bicon-size, 16px);
}
然后在页面中修改变量值:
.bicon {
--bicon-size: 40px;
}
- 或者使用!important强制优先级:
.bicon {
font-family: iconfont !important;
font-size: 16px;
}