使用 vuejs css modules 时是否可以使用嵌套的 css 选择器? ?
例如,我想限定此 css 的范围(以便 id 不影响子组件):
.list {
...
.item {
...
}
}
在文档中我只能看到非嵌套示例,但这是否方便,因为我需要将它们命名为类似于 BEM 的 .list-item
。但是,如果我使用 BEM,那么使用 css 模块就没有意义了,是吗?
最佳答案
是的,可以使用嵌套的 css 选择器,因此它们不会影响子组件;使用 css 模块。
如果使用 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>
关于css - 使用嵌套选择器和 vuejs CSS 模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53093518/