使用嵌套选择器和 vuejs css 模块答案

【问题标题】：Working with nested selectors & vuejs css modules使用嵌套选择器和 vuejs css 模块
【发布时间】：2018-11-01 00:04:33
【问题描述】：

在使用 vuejs css modules 时是否可以使用嵌套的 css 选择器？

例如，我想限定这个 css 的范围（这样 id 不会影响子组件）：

.list {
    ...

    .item {
       ...
     }
}

在文档中我只能看到未嵌套的示例，但这是否方便，因为我需要将它们命名为类似于 BEM 的 .list-item。但是如果我使用 BEM，那么使用 css 模块就没有意义了，是吗？

【问题讨论】：

这看起来像是scss 和scoped 的组合？

标签： css vue.js module

【解决方案1】：

是的，可以使用嵌套的 css 选择器，这样它们就不会影响子组件；使用 css 模块。

您需要使用预处理器来启用嵌套，LESS 或 SASS。

如果使用Single File Components，您的组件将如下所示

<template>
  <ul :class="$style.list">
    <li :class="$style.item"></li>
  </ul>
</template>

<!--       Or lang="less" -->
<style module lang="scss">
.list {
    ...

    .item {
       ...
     }
}
</style>

【讨论】：

如何使用 $style.在班上？我尝试使用它，但渲染时没有出现类名。
@user3779015 您是否已将module 添加到<style> 标记中？
是的，这是我的风格 -
当 OP 引用 vue loader docs 时，似乎没有必要指出这应该事先配置 :-)
我想知道你是否可以帮助我配置我的 webpack？我尝试从 vue-loader 网站添加配置，但没有成功。这是我的问题的link。

【解决方案2】：

是的，嵌套 css 选择器是使用 scss 调用的。您必须设置 scss。

例如在 vue 组件中制作你的样式标签：

<style scoped lang="scss">

scoped 属性告诉它只应用于这个组件。

关于 bem 你可以在 scss 中做这样的事情：

.list {
   //styles-a

   &-item {
      //styles-b
   }
}

这将在 css 中转换为 this:

.list {
    //styles-a
}
.list-item {
    //styles-b
}

【讨论】：

这个答案没有考虑到 OP 询问 CSS Modules (<style module lang="scss">)

【解决方案3】：

例如，如果您想在 Vue 中覆盖某些 UI 库的 CSS 类，您可以使用 :global 关键字。假设您有一个来自 Naive UI 库的 n-dropdown 组件。并且您想通过使用 CSS 模块覆盖其原生的非常深嵌套的 n-dropdown-option-body__prefix--show-icon CSS 类仅在当前组件中来自定义它。以下是你可以做到的：

<template>
    <n-dropdown :class="$style.menu">
    </n-dropdown>
</template>

<style module>
.menu:global.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix.n-dropdown-option-body__prefix--show-icon {
    margin-left: 33px;
    margin-right: 19px;
}
</style>

最后你会得到看起来像这样的选择器

.MobileNavMenu_menu_NhSka.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix.n-dropdown-option-body__prefix--show-icon {
    margin-left: 33px;
    margin-right: 19px;
}

所以:global 关键字之后的所有类都不会受到module 操作的影响。
如果.n-dropdown-menu 应该是menu 的子级，那么:global 两边应该有一个空格： .menu :global .n-dropdown-menu
Vue 会以可怕的崩溃提醒你

【讨论】：