Vue中全局样式、局部样式、子组件有效样式

添加全局样式

全局样式可以直接在入口（如：main.js）中 import 引入样式文件；

如此添加的样式便是全局有效的样式；
如：

// main.js
import "./assets/styles/common.less";

局部样式

在组件中直接定义样式，并且带上 scoped 属性；
没有 scoped 属性的样式，既为全局样式！*

<!-- helloworld.vue -->
<template>
	<div class="hello">Hello world!</div>
</template>

<!-- 这是使用 scoped 属性之后，内部所有样式仅在本组件中有效 -->
<style lang="less" scoped>
	.hello{
		font-size: 14px;
	}
</style>

<script>
export default {
	name : "hellow-world",
	// 其他 Vue 属性
}
</script>

子组件有效样式

当组件中含有子组件，并希望在此定义的局部样式可以传播到子组件可使用 /deep/ 关键字（stylus 中可使用 >>>)

假设 .hello 样式下存在一个子组件， .child 是子组件中存在的一个样式

在 stylus 配置子组件样式：

.hello >>> .child {
    font-size: 14px;
}

在非 stylus 配置子组件样式：

.hello /deep/ .child {
    font-size: 14px;
}