Utiliser css prochaines variables globaly

Question

J'ai postcss parser mis en place avec http://cssnext.io et j'essaie de trouver un moyen de configurer un fichier variables.css pour contenir tous mes paramètres de thème.

Jusqu'à présent variable.css ressemble à ceci avec un couple de vars

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

Je qu'importée dans mes autres fichiers où je veux utiliser ces variables, donc @import './variables.css' ou similaires, puis l'utiliser dans ce fichier comme background-color: var(--color-white) par exemple, mais je me follwoing avertissement:

variable '--color blanc'

est défini et utilisé sans une solution de repli [propriétés-postcss sur mesure]

Answer 1

Vous pouvez essayer d'installer l'importation postcss

$ npm install postcss-import

Cocher cette post pour plus de détails comment installer.

EDIT En utilisant postcss-import résoudre le problème, mais il y a des problèmes actuellement avec la dernière version, utilisez v 7.x pour la stabilité

Answer 2

Une autre solution si vous voulez partager vos variables avec votre code JavaScript, est à compter sur les options "variables" de postcss-custom-properties.

Voici un exemple d'une configuration postcss-cssnext pour passer les variables globales

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

Source: http://cssnext.io/usage/#features