浅谈vue中style的scoped属性(修改特定Element组件样式的方法)

在单页.vue文件中,为了保证各组件间的css样式不冲突,很可能会使用到局部css,也就是给

但是发现并不能正常的修改样式,于是通过chrome查看元素一探究竟
发现html中只有子组件的根元素被打了tag标签而编译后的css中是最后一个属性被加了tag标签,所以自然就定位不到元素修改他的样式了

...

既然问题的原理已经清楚了,那么接下来开始寻找解决方案,我们的目的只需要将tag打给我们要修改子组件样式的根元素就可以了

https://vue-loader.vuejs.org/en/features/scoped-css.html3 vue-loader的官方文档中也说了这个问题 所以使用 >>> 符号可以做到,但是注意vue-loader的版本要高于12.2.0 这个功能是这个版本后才具有的
https://github.com/vuejs/vue-loader/releases/tag/v12.2.0

最后上一下测试的demo


  
  

你可能感兴趣的:(浅谈vue中style的scoped属性(修改特定Element组件样式的方法))