Gatsby.js css: настраиваемые свойства

Я установил gatsby cli и создал базовый проект node / gatsby.js. В руководстве говорится: «Gatsby работает с модулями CSS из коробки.». Я также хотел использовать настраиваемые свойства css, как описано здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

(1) Я создал src/layouts/variables.css и вставил css с настраиваемыми свойствами, например:

:root {
    --brand-color: #ff3333;
}

(2) Затем в src/layouts/index.css я добавил @import './variables.css' в самом верху файла css.

(3) из-за @import на предыдущем шаге я установил и добавил postcss-import в качестве первого плагина в свой gatsby-config.js файл. Не уверен, что это правильно, так как он не называется «gatsby-plugin- *», как другие плагины.

(4) в моем компоненте нижнего колонтитула (src/components/Footer) у меня есть как index.js, так и index.module.css. В index.module.css я поставил:

.footer {
  color: var(--brand-color);
}

... думая, что --brand-color будет каскадировать через импорт через src / variables.css -> src / index.css -> src / index.js -> layouts / index.js -> мой компонент нижнего колонтитула.

Но когда я запускаю gatsby-develop, он говорит:

предупреждение в ./src/components/Footer/index.module.css

postcss-custom-properties: /path/to/src/components/Footer/index.module.css:2:3: переменная '--brand-color' не определена и используется без отката.

Как исправить эту ошибку? Это не позволяет сайту правильно отображаться.


css gatsby css-modules postcss css-variables
person yen    schedule 29.03.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Хорошо, я понял, что делаю не так:

Каждый (.module) .css файл, который должен использовать «глобальный» файл variables.css, должен явно импортировать его.

Добавление @import '../../layouts/variables.css'; в файл css моего компонента исправило это.

person yen    schedule 29.03.2018