Nuxt.js v2中scoped样式导入SCSS无法作用子元素的解决方法

问题说明 #

我在使用Nuxt.js v2时遇到了样式生效问题：当通过带scoped属性的<style>标签导入SCSS文件时，SCSS中针对子组件内部元素的样式无法生效。比如父组件scoped样式里导入的SCSS中，header自身的背景色能生效，但header下的ul、button等子元素样式完全不起作用。

问题原因 #

这是Vuescoped样式的特性导致的：scoped会给当前组件的元素自动添加唯一的data-v-xxx属性，样式仅作用于带有该属性的元素。子组件的根元素（比如这里的<header>）会继承父组件的data-v属性，所以根元素的样式能生效，但子组件内部的<ul>、<button>等元素属于子组件自身，不会带上父组件的data-v属性，因此父组件scoped样式里的后代选择器无法命中它们。

解决方法 #

方法1：使用深度选择器穿透scoped限制 #

在SCSS中使用::v-deep深度选择器，让样式穿透到子组件内部。修改你的SCSS文件：

header {
  background: #dddddd;

  ::v-deep > ul {
    list-style: none;
    padding: 0;
    display: flex;
  }

  ::v-deep button {
    background: black;
    color: white;
  }
}

Nuxt.js v2中推荐使用::v-deep写法，避免/deep/在预处理器环境下的语法问题。

方法2：将样式移到子组件自身的scoped样式中 #

把针对子组件内部元素的样式放到Header.vue的scoped样式里，符合scoped样式的设计逻辑，直接作用于子组件内部元素：

// Header.vue
<template>
  <header>
    <ul>
      <li>
        <h1>{{ appName }}</h1>
      </li>
      <li>
        <button>Sign in</button>
      </li>
    </ul>
  </header>
</template>

<style lang="scss" scoped>
header {
  background: #dddddd;

  > ul {
    list-style: none;
    padding: 0;
    display: flex;
  }

  button {
    background: black;
    color: white;
  }
}
</style>

之后父组件的scoped样式可仅保留作用于自身或子组件根元素的样式。

方法3：使用全局样式（谨慎使用） #

如果样式需要全局生效，可以去掉<style>标签的scoped属性，或者在nuxt.config.js中配置引入全局SCSS文件。但这种方式会污染全局样式，容易引发样式冲突，非必要不推荐使用。

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