17

关于 css-modules的文档非常稀少，所以我不确定我是否可以这样做。

这篇文章说我设置按钮样式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 会导出什么？他们给出的唯一例子是简单的类名选择器。我不知道.common.normal将导出为什么，或者什么.common > .normal ~ .strange？如果我使用 css-modules，我基本上不必使用任何类型的 CSS 选择器吗？

4

3 回答 3

9 
.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 */ }
于 2017-01-06T08:07:14.650 回答
3

我也较少使用 css 模块，但我认为他们使用 '&' 的方式不符合 css 模块的目标。据我了解，'composes' 更类似于@import 而不是 &，而且我发现自己只使用 & 来表示伪类。

您绝对可以按照这里的方式做事，但是您是否觉得必须在 HTML 中同时指定“普通”和“普通”类有点奇怪？在我看来，最好只指定“正常”，并让正常使用“撰写”继承共享样式。

于 2015-11-01T00:34:18.607 回答
3

如果你使用 webpack 加载器来加载 css-modules，你可以使用postcss加载器并添加各种插件来获得你想要的行为。

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

于 2015-11-18T21:26:55.597 回答