混合 css 模块类和引导活动答案

【问题标题】：Mix css modules classes and boostrap active混合 css 模块类和引导活动
【发布时间】：2016-10-15 16:10:04
【问题描述】：

在我正在处理的一个项目中，我们使用带有postcss（还有postcss-cssnext 和postcss-include）的css 模块。我们还将引导程序作为全局提供的依赖项。

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

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

【问题讨论】：

它根本不起作用吗？还是只是被覆盖了？
根本不工作。当 .active 类不在:global 中时，它会被转换为类之类的 css 模块（正在添加一些哈希）。当它再次位于:global 时，它根本不工作。

标签： css twitter-bootstrap postcss css-modules cssnext

【解决方案1】：

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

.btn-custom {
  color: red;
}

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

所以嵌套：

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

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

【讨论】：