Vue组件scoped样式为何总是无效？

本文共计1000个文字，预计阅读时间需要4分钟。

1. 问题场景：page1和page2均使用flexible移动端自适应时，page2页面需要手动设置rem基准值，但self.less中已设置基准，导致冲突。

2. 解决方案： - 在self.less中移除已设置的基准值。 - 在page2页面手动设置所需的rem基准值。

1、问题场景

page1,page2都使用flexible移动端自适应的时候，有一个页面page2需要手动设置rem基准值，

//手动设置基准 html{ font-size: 120px !important; }

但是在page2引用的self.less里面设置了基准，竟然没有生效

2、问题分析scoped属性

在引用self.less的时候，使用了属性scoped

vue中引入了scoped这个概念，设计思想就是让当前组件的样式不会修改到其他页面的样式，使用了data-v-hash的方式来使css有了他对应的模块的标识，通俗来说就是使用了scoped属性，template里面的html都会多一个data-v-hash的属性，css 选择器会根据data-v-hash来进行选择，当前的css文件只会对当前的页面生效。参考下图

那么问题来了,scoped只对当前组件里面的内容生效，会对组件里面的dom加data-v-hash属性，而不会对html,body等组件之外的dom添加,但是css里面的属性选择器都是data-v-hash属性的，参考下图，椭圆形里面是组件之外的，没有data-v-hash属性，所以加了scoped属性的css会对组件外无效。