Импорт переменных в модуль CSS в React

Question

Я использую модули CSS, и мои файлы CSS /stylesheet находятся рядом с моими компонентами.

Какой самый быстрый способ поддержки файла глобальных цветов, который можно импортировать в мою таблицу стилей?

Мои css-модули и веб-пакеты поддерживают это по умолчанию? Помогите.

Answer 1

Вы используете CRA? Если это так, вы можете. Вам просто нужно убедиться, что вы используете postcss и плагин postcss-modules-values. ПРИМЕЧАНИЕ: пока не тестировали это без приложения Create React, так что если у кого-то есть, это поможет узнать.

Теперь все, что вам нужно, это создать таблицу стилей (или просто использовать index.css, по вашему выбору) и сделать это:

@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;

А теперь из вашего CSS-файла в области компонентов просто импортируйте и используйте (почти как в JS):

/* import your colors... */
@value colors: "./colors.css";
@value blue, red, green from colors;

.button {
  color: blue;
  display: inline-block;
}

Источник(документы).