vue-loader深度作用选择器无效解决办法(修改iview组件样式)

vue深度选择器官方资料:https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

最近想修改iview 组件的样式,一直是拿着iview样式,自己重新仿造了iview组件格式,但是今天用到了穿梭框,看着重写特别麻烦,搜大量资料发现vue提供了通过父类修改子组件的深度选择器功能,与其相关的是vue-router 以及vue-loader

但是按照官方资料发现其一直无效,父组件修改不了子组件样式,查了一天资料,终于找到了原因,,原来是版本问题

vue-loader 需要 11.2.0以后版本才支持

vue-router需要 2.2.0以后版本才支持

现在贴出我的测试代码,vue-router 用的3.0.7

vue-loader深度作用选择器无效解决办法(修改iview组件样式)_第1张图片

vue-loader使用了12.0.0,同时vue-style-loader3.0.0(大家应该知道vue-loader和vue-style-loader必须匹配吧)

vue-loader深度作用选择器无效解决办法(修改iview组件样式)_第2张图片

测试代码







根据官网,使用>>> 或者 /deep/ 均可以实现修改样式。将穿梭框头背景颜色设置为红色

vue-loader深度作用选择器无效解决办法(修改iview组件样式)_第3张图片

你可能感兴趣的:(前端)