• 问题描述：

使用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>