添加全局样式
全局样式可以直接在入口(如: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;
}