Ich habe ein Projekt mit einer Reihe von CSS-Dateien (eine für jede reaktive Komponente). Ich verwende den css-loader (mit Modulen on) im webpack und auch postcss-cssnext.
Idealerweise möchte ich ein einzelnes variables.css , damit ich Variablen über die CSS-Dateien teilen kann. Ich habe versucht, variables.css mit etwas wie:
was ich dann importiere, damit es durch den css loader geht. Das Problem ist, andere Dateien greifen nicht auf diese Variablen zu, so dass entweder das nicht funktioniert oder ich etwas falsch mache (einschließlich dies in der Komponente CSS-Datei funktioniert direkt).
Eine Sache, die funktioniert, ist eine styles.json Datei mit dem folgenden Webpack-Setup:
Das Hauptproblem dabei ist jedoch, dass ich den Webpack-Dev-Server jedes Mal neu starten muss, wenn ich eine Variable ändere (also die Webpack-Konfiguration neu laden). Das ist nicht ideal.
Also, irgendwelche Gedanken zu einem besseren Weg, dies zu tun?
Die Verwendung von postcss-import ist der richtige Weg. Hier ist eine Beispielkonfiguration mit CSS-Modulen:
Und in deinen postcss Einstellungen:
%Vor% Die Einstellung path zeigt postcss-import an, um Pfade aufzulösen, indem auch in die hier angegebenen Verzeichnisse geschaut wird.
Und schließlich, sagen Sie in Ihrer CSS-Moduldatei Button.css :
Variablen (zumindest im Moment) werden nicht über importierte css-Dateien in cssnext-loader geteilt, selbst wenn Sie sie in root {} einfügen.
Die einfachste Lösung, die ich gefunden habe, ist, postcss-import plugin vor postcss-cssnext zu verwenden. Nachdem Sie es eingerichtet haben, müssen Sie
@import 'variables.css';
in CSS-Dateien, in denen Sie auf diese Variablen zugreifen möchten.
Tags und Links webpack css-modules css-variables postcss css-loader