reactjs - 我可以使用带有 LESS + 嵌套的 css 模块吗？

Question

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

This article说我用正常和错误状态设置按钮样式的方式如下所示:

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

Answer 1

.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 */ }