Question

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

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

icon.scss

cls=bar

button.scss

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

然后我将其导入到它们各自的组件中：

MyIcon.vue

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

MyButton.vue

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

麻烦的是，在'button.scss'中的嵌套 <template><button class="my-button"><slot /></button></template> <style lang="scss" module> @import '/path/to/button.scss' </style>类生成的根哈希（'._2XJ5'）与根.my-icon类不同，在“ icon.scss”（._ 2UFd）中。因此，当我尝试将图标嵌入按钮时，将得到如下所示的输出：

.my-icon

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

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

Answer 1

该文档隐藏在Vue加载器的深处，简要讨论了如何逃避作用域样式。解决方案是使用a /deep/ selector，它由scss预处理，以使其后面的所有内容均不散列。普通的CSS中有类似的东西，但是没有什么联系。

假设我们拥有npm list -g > ~/Desktop/npmfiles.txt组件，并希望在其中设置my-button类的样式，我们可以执行以下操作：

my-icon

以下内容应生成类似以下内容的内容。它仍然在您的组件中，但<template> <div> <slot></slot> </div> </template> <style lang="scss" scoped> /deep/ .my-icon { background: red; } </style>不一定是您的组件的一部分。例如，在这种情况下，它可能位于插槽内。

.my-icon

在VueJS模块中嵌套SCSS规则

1 个答案: