将SCSS规则嵌套在VueJS模块中

Question

在处理CSS模块以将样式导入本地组件时，如何处理嵌套的SCSS规则（扩展基本样式）？

就我而言，我有以下两个SCSS文件：

icon.scss

.my-icon {
  // base styles for an icon
}

button.scss

.my-button {
  ...
  .my-icon {
    // special styles when an icon is in a button
  }
}

然后我将其导入各自的组件：

MyIcon.vue

<template><i class="my-icon" /></template>
<style lang="scss" module>
@import '/path/to/icon.scss'
</style>

MyButton.vue

<template><button class="my-button"><slot /></button></template>
<style lang="scss" module>
@import '/path/to/button.scss'
</style>

问题是嵌套的.my-icon类在'button.scss'中生成了一个不同的散列（'。_ 2XJ5'）而不是根目录.my-icon，在'icon.scss'（。_ 2 UFd）中。因此，当我尝试将图标嵌入按钮时，我得到一个如下所示的输出：

<button class="._3S2w"><i class="._2UFd" /></button>

这是正确的，但是不应用按钮中图标的“特殊样式”，因为该类是作为不同的哈希生成的。

如何确保“.my-icon”的哈希值始终相同？

Answer 1

某处隐藏在Vue加载器的深处，文档简要介绍了如何摆脱作用域样式。解决方案是使用a /deep/ selector，它由scss预处理，为其后面的所有内容提供无哈希值。在普通的CSS中有类似的东西，但它有点无关。

假设我们有my-button组件，并希望在其中设置my-icon类，我们可以执行以下操作：

<template>
  <div>
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
/deep/ .my-icon {
  background: red;
}
</style>

以下应生成如下内容。它仍然在您的组件范围内，但.my-icon不必是您的组件的一部分。在这种情况下，它可以在插槽内部。

[data-v-f3f3eg9] .my-icon {
  background: red;
}