在 VueJS 模块中嵌套 SCSS 规则

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' 中，与根 .my-icon 类，在 'icon. scss' (._2UFd)。因此，当我尝试将图标嵌入到按钮中时，我会得到如下所示的输出：

<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;
}