Глобальное использование переменных css next

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

Пока что variable.css выглядит так с парой переменных

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

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

переменная '--color-white' не определена и используется без запасного варианта [postcss-custom-properties]


css postcss cssnext
person Ilja    schedule 01.09.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

$ npm install postcss-import

Прочтите этот сообщение, чтобы узнать больше об установке.

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

person Edison Biba    schedule 01.09.2016

arrow_upward
3
arrow_downward

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

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

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

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

person MoOx    schedule 02.09.2016