正常使用css
css 样式天生全局性的，所以总是极容易地就发生样式冲突——要么是样式相互覆盖，要么就是隐式地级联到了下面那些我们未考虑到的元素。 父组件与子组件都定义了相同的的样式，会导致子组件的样式被父组件所覆盖。
例子：
// 父组件
<template>
<div class="content">
<div class="title-wrap">我是红色的</div>
<green-title></green-title>
</div></template>
<style lang="scss">
.content {
.title-wrap {
font-size: 20px;
color: red;
}
}
</style>// 子组件
<template>
<div class="content">
<div class="title-wrap">我是绿色的</div>
</div>
</template>
<style lang="scss">
.content {
.title-wrap {
font-size: 20px;
color: green;
}
}
</style>
scoped：
使用简单
scoped作用的阻止上层的css样式传递到下层，限制当前css作用域，使其只对当前组件生效，
借助PostCSS实现
，子组件的根节点会受父组件的作用于影响调整子组件跟元素的样式。
scoped作用的style对于我们来说不直观，适用于中小型项目
在dom 上面追加 data-v-【不定后缀】
深度作用
如果你希望scoped中的某个样式能够作用的更深，影响到子组件，你可以使用>>>操作符
<template>
<div class="content">
<div class="title-wrap">我是绿色的</div>
</div>
</template>
<style lang="scss" scoped>
.content {
.title-wrap {
font-size: 20px;
color: green;
}
}
</style>
# 注意看我将style中的lang="scss"去掉了，因为加了预处理器后无法正确解析>>>，这种情况可以使用/deep/代替，本质是>>>的别名
<style scoped>
.content >>> .title-wrap {
font-size: 20px;
color: red;
}
</style>
---------- 或者 ----------------
<style lang="scss" scoped>
.content {
/deep/ {
.title-wrap {
font-size: 20px;
color: red;
}
}
}
</style>
module：
<template>
<div :class="$style.content">
<div :class="$style['title-wrap']">我是红色的</div>
<green-title :styleTitle="$style['title-wrap']"></green-title>
<div>{{$style.titleColor}}</div>
</div>
</template>
<style lang="scss" module>
$title-color: red;
:export {titleColor: $title-color}
.content {
.title-wrap {
font-size: 20px;
color: $title-color;
}
}
</style>
1.写法区别如上面标红
2.通过module作用的style将会重新命名为：会重新命名为：文件名_原style名_不定后缀
3.在大型项目中能够帮助我们迅速定位到要查找的组件，样式更加灵活安全，易于控制
modules参考：github.com/css-modules…
