Mit css nächsten Variablen globaly

Question

Ich habe Postscript-Parser eingerichtet mit http://cssnext.io und versuche herauszufinden, wie eine variables.css Datei einrichten, um alle meine Design-Einstellungen enthalten.

Bisher variable.css sieht wie folgt aus mit ein paar Vars

:root { 
    --color-white: #FFF; 
    --color-black: #000; 
} 

ich als es mir in den anderen Dateien importieren, wo ich diese Variablen verwenden möchten, so @import './variables.css' oder ähnlich und es dann in dieser Datei verwenden, wie background-color: var(--color-white) zum Beispiel aber werde ich follwoing Warnung:

Variable '--color-white' ist nicht definiert und verwendet, ohne Ausweich [postcss-custom-Eigenschaften]

Answer 1

können Sie versuchen, postcss Import

$ npm install postcss-import

prüfen diese post, um weitere Informationen zur Installation zu installieren.

EDIT Mit postcss-import das Problem gelöst werden jedoch derzeit Probleme mit der neuesten Version, die Verwendung v 7.x für Stabilität

Answer 2

Eine andere Lösung, wenn Sie Ihre Variablen mit Ihrem JavaScript-Code teilen möchten, ist zu Verlassen Sie sich auf die "Variablen" -Optionen von postcss-custom-properties. Hier

ist ein Beispiel für eine postcss-cssnext Config globale Variablen

require("postcss-cssnext")({ 
    features: { 
    customProperties: { 
     variables: { 
     mainColor: "red", 
     altColor: "blue", 
     } 
    } 
    } 
}) 

Quelle weitergeben müssen: http://cssnext.io/usage/#features