# 样式
# CSS Modules
在样式开发过程中，有两个问题比较突出：
全局污染 —— CSS 文件中的选择器是全局生效的，不同文件中的同名选择器，根据
npm run build生成文件中的先后顺序，后面的样式会将前面的覆盖；选择器复杂 —— 为了避免上面的问题，我们在编写样式的时候不得不小心翼翼，类名里会带上限制范围的标示，变得越来越长，多人开发时还很容易导致命名风格混乱，一个元素上使用的选择器个数也可能越来越多，最终导致难以维护。
好在 vue 为我们提供了 scoped (opens new window) 可以很方便的解决上述问题。 它顾名思义给 css 加了一个域的概念。
/* 编译前 */
.demo {
color: red;
}
/* 编译后 */
.demo[_v-f5f5eg9] {
color: red;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
只要加上 <style scoped> 这样 css 就只会作用在当前组件内了。详细文档见 vue-loader (opens new window)
注意：
使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。
# 目录结构
admin-element-vue js.v1 所有全局样式都在 @/assets/css 目录下设置
├── css
│ ├── element-variables.scss # 全局自定义 element-ui 样式
│ ├── global.scss # 全局通用样式
│ ├── mixin.scss # 全局 mixin
│ ├── sidebar-menu.scss # el-menu 侧边栏 - 菜单 样式 重置
│ └── variables.scss # 全局变量
1
2
3
4
5
6
2
3
4
5
6
常见的工作流程是，全局样式都写在 @/assets/css 目录下，每个页面自己对应的样式都写在自己的 .vue 文件之中
<style>
/* global styles */
</style>
<style lang="scss" scoped>
/* local styles */
</style>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 父组件改变子组件样式 深度选择器
当你子组件使用了 scoped 但在父组件又想修改子组件的样式可以 通过 >>> 来实现：
<style scoped>
.a >>> .b { /* ... */ }
</style>
1
2
3
2
3
将会编译成
.a[data-v-f5f5eg9] .b {
/* ... */
}
1
2
3
2
3
如果你使用了一些预处理的东西，如 sass 你可以通过 /deep/ 来代替 >>> 实现想要的效果。
.a {
/deep/ .b{
/* ... */
}
}
1
2
3
4
5
2
3
4
5
所以你想覆盖某个特定页面 element 的 button 的样式，你可以这样做：
.xxx-container >>> .el-button{
xxxx
}
1
2
3
2
3