Używanie css kolejnych zmiennych globaly

Question

Mam parser Postcss skonfigurowany z http://cssnext.io i próbuję znaleźć sposób, aby skonfigurować plik variables.css, aby zawierał wszystkie moje ustawienia motywu.

Dotychczas variable.css wygląda to z kilkoma Vars

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

ja niż zaimportować go do moich innych plików, gdzie chcę użyć tych zmiennych, więc @import './variables.css' lub podobnej, a następnie używać go w tym pliku jak background-color: var(--color-white) na przykład, jednak zostanę follwoing ostrzeżenie:

zmienna '--color-biały' jest niezdefiniowany i wykorzystywane bez awaryjnej [postcss-custom-properties]

Answer 1

Można spróbować zainstalować Importuj postcss

$ npm install postcss-import

Sprawdź to post wiecej informacji jak zainstalować.

EDIT Korzystanie postcss-import rozwiązać ten problem, jednak nie są obecnie wydaje się użycie najnowszej wersji, v 7.x stabilności

Answer 2

Innym rozwiązaniem, jeśli chcesz podzielić się zmiennych z kodem JavaScript, jest polegać na opcjach "zmiennych" niestandardowych właściwości postcss.

Oto przykład config postcss-cssnext przekazać zmienne globalne

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

Źródło: http://cssnext.io/usage/#features