Использование css next variables globaly

Question

У меня есть postcss-синтаксический анализатор с http://cssnext.io, и я пытаюсь найти способ настроить файл variables.css, чтобы он содержал все настройки моей темы.

До сих пор variable.css выглядит это с парой Варс

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

я чем импортировать его в другие мои файлы, в которых я хочу использовать эти переменные, так @import './variables.css' или подобных, а затем использовать его в этом файле как background-color: var(--color-white) к примеру, однако я получаю follwoing предупреждение:

переменная '--color-белый' не определено и используется без запасного [postcss-заказные недвижимость]

Answer 1

Вы можете попробовать установить postcss импортировать

$ npm install postcss-import

Проверить это post для получения более подробной информации, как установить.

EDIT Использование postcss-import решить эту проблему, однако в настоящее время проблемы с последней версией, использование об 7.x для стабильности

Answer 2

Другим решением, если вы хотите поделиться переменные с кодом JavaScript, является полагайтесь на опции «переменные» параметров postcss-custom-properties.

Вот пример postcss-cssnext конфигурации передать глобальные переменные

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

Источник: http://cssnext.io/usage/#features