Question

在我正在开发的项目中，我们使用带postcss的css模块（也是postcss-cssnext和postcss-include）。我们还将bootstrap作为依赖关系，全局提供。

在给定的组件中，我有一个按钮的自定义类。所以我的按钮有以下类：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 {} }
}

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

Answer 1

全球目标类需要包含在parens中，如下所示：

.btn-custom {
  color: red;
}

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

所以嵌套：

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

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

混合css模块类和boostrap激活

1 个答案: