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,border-radius */
&.normal { /* blue color,light blue background */ }
&.error { /* red color,light red background */ }
}
像我一直做的一样,没有介绍这个新的组合语法.我认为更清楚哪些风格建立在其他样式之上,如果我可以将它们嵌入到代码中.
但是我不知道这将被css-modules导出？他们给出的唯一例子是简单的类名选择器.我不知道怎么样.common.normal将被导出为,或什么.common>正常〜.strange？如果我使用css-modules,我基本上不必使用任何类型的CSS选择器？
解决方法
我也使用较少的css模块,但我不认为他们的方式你使用’&’符合css模块的目标.从我的理解“composes”更像@import而不是&;我只发现自己使用&为psuedo类.
你绝对可以按照你在这里的方式做事情,但是你不觉得有点奇怪,你必须在HTML中同时指定“常用”和“正常”类？在我看来,要更好地指定’normal’,并且通常使用’compose’继承共享样式.
