vue3中使用scss加上scoped导致样式失效问题

在Vue3中，使用SCSS预处理器编写样式时，如果在<style>标签中添加scoped属性，会导致样式失效。

原因在于，scoped属性会对样式中的选择器加上一个data-v-前缀，使其只对当前组件生效。而SCSS预处理器生成的CSS选择器在编译时无法加上前缀，导致样式无法生效。

为了解决这个问题，可以使用以下两种方法之一。

方法一：使用Vue提供的/deep/选择器

Vue提供了/deep/选择器，可以用来穿透组件的作用域，让样式作用于组件内部的所有元素。

示例代码如下：

<template>
  <div class="wrapper">
    <h1>Scoped Style</h1>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</template>

<style scoped lang="scss">
.wrapper /deep/ h1 {
  color: red;
}
.wrapper /deep/ p {
  color: blue;
}
</style>

在上述示例中，/deep/选择器穿透了.wrapper组件的作用域，使h1和p元素的样式能够生效。

方法二：使用CSS Modules

Vue官方推荐使用CSS Modules来解决样式作用域问题。CSS Modules可以给每个组件都生成一个唯一的类名，使样式只对当前组件生效。

示例代码如下：

<template>
  <div class="wrapper">
    <h1 class="title">Scoped Style</h1>
    <p class="content">Lorem ipsum dolor sit amet.</p>
  </div>
</template>

<style scoped lang="scss" module>
.title {
  color: red;
}
.content {
  color: blue;
}
</style>

在上述示例中，module属性告诉Vue使用CSS Modules，给<style>标签中的样式添加了scoped作用域限定符，并使用了.title和.content这两个模块化类名，使样式只针对当前组件生效。

以上就是在Vue3中使用SCSS加上scoped导致样式失效问题的完整攻略。