我可以将 css-modules 与 LESS + 嵌套一起使用吗？

Question

documentation on css-modules 非常稀疏，所以我不确定我是否可以做到这一点。

This article 表示我使用 normal 和 error 状态设置按钮样式的方式如下所示：

.common { /* font-sizes, padding, border-radius */ }
.normal { composes: common; /* blue color, light blue background */ }
.error { composes: common; /* red color, light red background */ }

但我更愿意这样写：

.common {
    /* font-sizes, padding, border-radius */
    &.normal { /* blue color, light blue background */ }
    &.error { /* red color, light red background */ }
}

就像我一直做的那样，没有引入这个新的 composes 语法。我认为如果我真的可以将它们嵌套在代码中，那么哪些样式构建在其他样式之上会更清楚。

但我不知道 css-modules 会导出什么？他们给出的唯一示例是简单的 class 名称选择器。我不知道 .common.normal 将导出为什么，或者 .common > .normal ~ .strange 是什么？如果我使用 css-modules，我基本上必须 而不是 使用任何类型的 CSS 选择器吗？

Answer 1

我也较少使用 css 模块，但我认为他们使用“&”的方式不符合 css 模块的目标。根据我的理解，'composes' 比 & 更类似于 @import，而且我发现自己只将 & 用于 psuedo-类。

你当然可以按照你这里的方式做事，但是你不觉得你必须同时指定 'common' 和 'normal' 类有点奇怪吗？ HTML？在我看来，只指定 'normal' 并让 normal 使用 'compose'.

继承共享样式要好得多

Answer 2

如果您为 css 模块使用 webpack 加载器，您可以使用 postcss 加载器并添加各种插件以获得所需的行为。

例如“postcss-nested”插件，它允许您编写嵌套规则。

Answer 3

.common {
    /* font-sizes, padding, border-radius */
    :global {
        &.normal { /* blue color, light blue background */ }
        &.error { /* red color, light red background */ }
    }
}

这就是我的解决方案。如果您使用 styles.common，则 css 将是：

.ramdomStrings {
    /* I'm not sure if this exists, but it doesn't matter */
}
.ramdomStrings.normal { /* blue color, light blue background */ }
.randomStrings.error { /* red color, light red background */ }

我可以将 css-modules 与 LESS + 嵌套一起使用吗？

Can I use css-modules with LESS + nesting?

less

reactjs

webpack

css-modules