混合 css 个模块 类 并启动引导程序

Question

在我正在进行的项目中，我们使用 css 模块和 postcss（还有 postcss-cssnext 和 postcss-include）。我们还有 bootstrap 作为全局提供的依赖项。

在给定的组件中，我有一个按钮的自定义 class。所以我的按钮有以下 classes：btn btn-custom.

根据需求我想修改按钮处于激活状态时的外观。为此 bootstrap 具有以下选择器：.btn.active, .btn:active。覆盖 pseudoclass 是比较容易的部分。 .active class 虽然是它变得棘手的地方。

在我的 css 文件中，我尝试了几种方法来处理这个问题，但 none 似乎有效。以下是我尝试过的一些方法：

.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

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

.btn-custom {
  color: red;
}

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

所以嵌套：

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

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