uniapp打包 H5 样式失效以及隐藏H5的顶部导航栏

最新推荐文章于 2025-04-30 21:05:10 发布

开发那点事儿~

最新推荐文章于 2025-04-30 21:05:10 发布

阅读量1.8k

点赞数 1

分类专栏：前端开发 uniapp css 文章标签： uni-app 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_58293192/article/details/131781706

版权

前端开发同时被 3 个专栏收录

93 篇文章

订阅专栏

css

6 篇文章

订阅专栏

uniapp

5 篇文章

订阅专栏

文章讲述了在使用::v-deep修改组件样式时，由于数据绑定的hash在本地和线上环境不同导致样式失效的问题，解决方案是去掉数据绑定部分。另外，介绍了如何在uni-app中通过修改App.vue的样式来隐藏H5的顶部导航栏，需要注意样式导入的顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一 .

当我们本地通过 :: v-deep 来修改组件样式的时,本地运行是可以生效的,但是打包发布之后样式失效.

::v-deep .u-icon__icon[data-v-2ee87dc9] {
	color: #fff !important;
}

后来发现把后面的 [data-v-2ee87dc9] 给删除掉就没有问题了.因为本地运行时是 [data-v-2ee87dc9] ,打包到线上之后就是 [data-v-21287dc7] 和我们本地是不同的,所以会出现样式失效的问题.

::v-deep .u-icon__icon {
	color: #fff !important;
}

二.

隐藏H5的顶部导航栏: 在 App.vue 文件中添加一下代码

<style lang="scss">
	// 隐藏顶部导航栏(一定要写在 @import 的前面,否则报错!!!)
    uni-page-head {
        display: none;
	}
	@import "@/uni_modules/uview-ui/index.scss";
	@import '@/static/scss/index.scss'
</style>