App.vue里：
<style lang="scss">
/每个页面公共css /
uni-button[type='primary'] {
background-color: red;
}
</style>
jasonw
- 发布：2024-07-17 18:11
- 更新：2024-07-18 17:22
- 阅读：121
产品分类： uniapp/H5
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 14.4.1
HBuilderX类型： 正式
HBuilderX版本号： 4.23
浏览器平台： Chrome
浏览器版本： 126.0.6478.127
项目创建方式： HBuilderX
操作步骤：
预期结果：
按钮会变红色
按钮会变红色
实际结果：
按钮还是蓝色
按钮还是蓝色
bug描述：
使用 HBuilderX 创建的 vue3 版本的 uni-app 项目，在开发环境中，写在 App.vue 文件中的 样式没有覆盖掉默认的样式。
正式打包后没见有这个问题。Vue2版本也没见有这个问题。
2023-09-27有人反馈这个问题，链接：https://ask.dcloud.net.cn/question/179034，但是一直都没见有修复。
爱豆豆 - 办法总比困难多
那就加上 !important; 增加权重
uni-button[type='primary'] {
background-color: pink !important;
}或者
body uni-button[type='primary'] {
background-color: pink;
}
jasonw (作者)
我知道增加权重能临时解决。加上后，后续想要在页面上调整，都必须加上important。
最主要的是开发环境和编译环境出来的东西不一致，不是影响开发速度吗？
如果能从根源上解决不是更好？
2024-07-25 14:43
爱豆豆
我只是给你提供解决问题的方式
你二次封装一个button组件 也一样可以解决这个问题
这问题的根源应该是加载顺序导致的
App.vue 及其中的 CSS（uni-button[type='primary']）首先被加载 随后页面组件及其元素和样式被加载 在这个过程中 App.vue 中全局设置的 uni-button[type='primary'] 样式可能会被页面中的同名样式覆盖 导致全局样式无法生效 将 uni-button[type='primary'] 样式放到页面组件的 <style> 中 无需增加样式权重即可生效 所以我觉得这是一个加载顺序导致的问题
你可以在上面邀请官方人员看下这个问题 是否需要优化 或者 确定是一个bug
2024-07-25 16:59