Wie benutzt man SCSS `function`,` mixin` in Kombination mit CSS-Modul?

Question

Ich habe gerade begonnen, CSS-Modul auf meinem React-Projekt zu verwenden und möchte es schön arrangieren; Gruppierung von SCSS-Utils, Funktionen usw. Ich kann jedoch nicht mit CSS-Modul arbeiten. Angenommen, ich habe eine rem Funktion, wie kann ich sie überall in meinem Projekt verwenden? Ich dachte, eine Funktion wie folgt zu erstellen:

:global {  
    @function rem($px) { 
    @return ($px/16px) * 1rem; 
    } 
} 

und wiederverwenden es überall, aber das funktioniert nicht. Ist es möglich, wiederverwendbar functions mit CSS-Modul?

Answer 1

Sass ist nicht von CSS Module bewusst.

Was wir im Allgemeinen tun, ist common.scss, die kein physisches CSS ausgibt. Es ist ausschließlich für Mixins, Funktionen und Variablen (Dinge wie Erweiterungen und Platzhalter funktionieren nicht so, wie Sie es erwarten, da der Sass, glaube ich, auf Komponentenebene kompiliert wird). Wir importieren diese Datei explizit in jede Komponente, die sie benötigt, da sie am Ende in reines CSS kompiliert wird, so dass es keine Duplizierung gibt.

Dies ist der Ansatz, den wir mindestens in Vue nehmen. Ich kann mir nicht vorstellen, dass React hier zu verschieden ist.