Scoped使用注意事项

问题：添加样式没有生效

原因：

scoped的原因：style中添加scoped后，如果该组件中含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性，所以无法直接修改其他组件的样式。

解决方法：

将要覆盖样式用全局样式写。

<style  scoped lang="less">
.side-menu-wrapper{
  height: 100%;
  .router-link-active{
    color:#2c68ff;
    background-color:#ecf1fa;
    width:177px;
    border-right: 2px solid blue;
  }
}
</style>
<style>
.side-menu-wrapper .el-submenu.is-active .el-submenu__title{
  color:#2c68ff !important;
}
</style>

总结：

scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式，使用了data-v-hash的方式来使css有了它对应模块的标识，这样写css的时候不需要加太多额外的选择器，方便很多。

scoped渲染规则：

　　1、给HTML的DOM节点加一个不重复data属性(形如：data-v-19fca230)来表示他的唯一性

　　2、在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-19fca230]）来私有化样式

　　3、如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性

但是要注意scoped的作用域，因为权重的问题，如果是在子组件使用了scoped，那么在父组件中是不能直接修改子组件的样式的，需要使用深度选择器

.parent >>> .children{ /* ... */ }

.parent /deep/ .children{ /* ... */ }

或者使用全局样式

<style lang="less" scoped>
    @import "./test.less";
</style>
<style lang="less">
    //你的覆盖样式
</style>