Использование глобальных переменных 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]

Источник

2 ответа

Решение

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

$ npm install postcss-import

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

РЕДАКТИРОВАТЬ Использование postcss-import Решил проблему, однако в настоящее время есть проблемы с последней версией, используйте v 7.x для стабильности

Источник

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

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

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

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

Источник
Другие вопросы по тегам