cssモジュールクラスとboostrapアクティブを混ぜて

Question

私が作業しているプロジェクトでは、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 {} } 
} 

これがどのように達成されたかについての考え方はありますか？

Answer 1

グローバルそうのように、括弧で包まれる必要があるクラスを対象：

.btn-custom { 
    color: red; 
} 

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

だから、ネスティングで：

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

最後のものは、私はPostCSSプラグインの順序が重要であると思い、テストされていないされていることここに。