使用scoped时根组件导入的SCSS仍在子组件生效，求解释该行为

先搞懂Vue scoped样式的核心逻辑：
Vue会给当前组件渲染的所有DOM元素加一个唯一的自定义属性（比如data-v-abc123），同时把scoped标签里的所有样式规则，自动加上这个属性的选择器后缀（比如.btn会被编译成.btn[data-v-abc123]），以此实现样式的组件隔离。

你遇到的问题，主要有这几个原因：

• 子组件根元素会带上父组件的scoped属性
  父组件用了scoped样式时，子组件的根节点会同时被打上父组件的data-v-xxx属性和自身组件的data-v-xxx属性。如果你导入的SCSS里的类选择器（比如.btn、.custom-dropdown）正好匹配子组件的根元素，那编译后的.btn[data-v-xxx]就会选中这个根节点，样式自然就生效了。

• 导入的SCSS里有未限定的全局/标签选择器
  要是你导入的SCSS文件里写了直接的全局选择器（比如body、html）或者不带组件限定的标签选择器（比如p、div），哪怕是在scoped样式里导入，这些选择器会被处理成带属性后缀的全局选择器（比如p[data-v-xxx]），会匹配所有符合条件的元素——包括子组件内部的对应标签，所以会影响子组件。

• SCSS里用了scoped穿透语法
  如果导入的SCSS文件里包含::v-deep（旧版的/deep/、>>>）这类语法，会强制穿透scoped的隔离，直接作用于子组件内部的所有匹配元素，这也会导致子组件被影响。

回到你的代码，你在根组件的scoped样式里直接@use导入了多份SCSS，这些文件里的类选择器会被Vue自动加上根组件的data-v属性后缀，而子组件的根元素带有这个属性，所以对应的样式就作用到了子组件上。如果要避免这种情况，要么把全局样式类的SCSS移到非scoped的样式标签里导入，要么在SCSS里把样式嵌套在当前组件的根选择器内，或者明确限定样式只作用于当前组件内部的元素。

内容的提问来源于stack exchange，提问作者temp