scoped的原理及修改组件的样式

scoped的工作原理

style标签的scoped会在vue-loader里进行处理
所谓的局部css就是在当前组件里的所有html标签打一个data-tag
然后会把scoped里的css编译为xxx[data-v-4d856c52],这也就是scoped的作用
1.全局修改
在全局样式app.css中直接修改全局样式
或
在组件中style不定义局部样式，也就是不给style标签scoped属性
2.深度修改局部样式
您希望scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合
注：某些预处理器（如Sass）可能无法>>>正确解析。在这些情况下，您可以使用组合/deep/或::v-deep组合 - 两者都是别名，>>>并且工作完全相同。

.search-option >>> .el-input__inner {
  height: 32px;
  border-radius: 0;
}

参考官网：https://vue-loader.vuejs.org/en/features/scoped-css.html 59