css - 混合CSS模块类和 bootstrap 激活

在一个我正在研究的项目中，我们将CSS模块与postcss（以及postcss-cssnext和postcss-include）一起使用。我们也将引导程序作为全局提供的依赖项。

在给定的组件中，我确实具有按钮的自定义类。因此，我的按钮具有以下类别：btn btn-custom。

根据要求，我想在按钮处于活动状态时修改其外观。对于该引导程序，具有以下选择器：.btn.active, .btn:active。覆盖伪类很容易。虽然.active类很棘手。

在我的css文件中，我尝试了几种方法来解决此问题，但似乎没有一种有效。这是我尝试过的一些方法：

.btn-custom {
  &.active, &:active {}
  @nested :global &.active, &:active {}
  @nested :global & { &.active, &:active: {} }
  @nested :global { &.active, &:active: {} }
}

:global {
  .btn-custom { &.active, &:active {} }
  .btn { &.active, &:active {} }
}

有谁知道如何实现这一目标？

最佳答案

全局目标类需要用括号括起来，如下所示：

.btn-custom {
  color: red;
}

.btn-custom:global(.active) {
  color: blue;
}

因此，嵌套：

.btn-custom {
  &:global(.active),
  &:active {}
}

最后一个未经测试，我想PostCSS插件的顺序在这里很重要。

关于css - 混合CSS模块类和 bootstrap 激活，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40043154/