uniapp引用全局样式不生效

Ιτ-ωoгκεг

已于 2022-10-24 15:12:11 修改

阅读量4.2k

点赞数 1

分类专栏： uni-app Mac 文章标签： 1024程序员节 uni-app macos css

于 2022-10-24 15:11:24 首次发布

本文链接：https://blog.csdn.net/wangyaodong915/article/details/127492587

版权

Mac 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

uni-app

1 篇文章 0 订阅

订阅专栏

uniapp引用全局样式不生效

今天是2022年10月24日，1024程序员节，心血来潮学习uniapp开发。记录一下学习过程中遇到的小坑，供后来者参考。

问题描述：

使用HBuilderX编辑器，在根目录的 uni.scss 加入了一些公共字体设置样式后，在 /pages/home/home.vue 标签中引入后样式未生效。

uni.scss 添加的样式代码

/* 控制文字大小 */
.fs-30 {
	font-size: 30upx !important;
}
.fs-28 {
	font-size: 28upx !important;
}
.fs-26 {
	font-size: 26upx !important;
}
.fs-24 {
	font-size: 24upx !important;
}

home.vue 引用代码

<template>
	<view>
		<view class="fs-30 color-9b9b">
			测试段落一
		</view>
		<view class="fs-24 color-8d8d">
			测试段落二
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

原因分析：

HBuilderX 在编译过程中，如果当前页面的<style></style>中没有样式代码时，编译时默认跳过该页面，所以引入的样式不生效，这只是HbuilderX编辑器的编译问题。

解决方案

在 home.vue style 标签中增加本页面样式

<template>
	<view>
		<view class="fs-30 color-9b9b">
			测试段落一
		</view>
		<view class="fs-24 color-8d8d">
			测试段落二
		</view>
		<!-- 解决方式示例 start-->
		<view class="title">	
			<text class="iconfont icon-mima"></text>
		</view>
		<!-- 解决方式示例 end-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<!-- 新增一个本页样式， lang属性也要加上 -->
<style lang="scss">
	.title{
		color: #ccc;
	}
</style>