Mix css Module Klassen und Bootrap aktiv

Question

In einem Projekt, an dem ich arbeite, verwenden wir css Module mit postcss (auch postcss-cssnext und postcss-include). Wir haben auch Bootstrap als eine Abhängigkeit, die global bereitgestellt wird.

In einer bestimmten Komponente habe ich eine benutzerdefinierte Klasse für eine Schaltfläche. Also meine Schaltfläche hat die folgenden Klassen: btn btn-custom.

Entsprechend den Anforderungen möchte ich das Aussehen der Schaltfläche ändern, wenn es in einem aktiven Zustand ist. Für dieses Bootstrap hat der folgende Selektor: .btn.active, .btn:active. Das Überschreiben der Pseudoklasse ist der einfache Teil. Die Klasse .active ist jedoch, wo es schwierig wird.

In meiner CSS-Datei habe ich mehrere Möglichkeiten versucht, damit umzugehen, aber keiner scheint zu funktionieren. Hier sind einige der Dinge, die ich versucht habe:

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

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

Hat jemand eine Idee, wie dies erreicht werden könnte?

Answer 1

Globale Klassen gezielt muss in Pars gewickelt werden, etwa so:

.btn-custom { 
    color: red; 
} 

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

So mit Verschachtelung:

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

Das letzte ungetestet ist, ich denke, die Reihenfolge der PostCSS Plugins ist wichtig, Hier.