Как создать файл глобальных настроек в модулях react css

Я хочу иметь файл только для хранения цветов и некоторых других настроек, которые я собираюсь использовать в своих стилях css. Потому что я не хочу указывать один и тот же цвет в разных файлах несколько раз. Как я могу добиться этого с помощью модулей css?

Например: settings.css

$primary-color: #785372;
$secondary-corlor: #22b390;

Кнопка/styles.css

.button {
  background: $primary-color;
  display: flex;
}

reactjs react-css-modules
person Bruce Mu    schedule 19.10.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Из ваших образцов это похоже на Sass (который можно использовать вместе с модулями CSS). Если это так, просто импортируйте частичный файл, содержащий переменные.

@import 'path/to/variables.scss';

Если Sass не задействован, тогда postcss-modules-values — это то, что вам нужно:

variables.css

@value primary: #785372;
@value secondary: #22b390;

styles.css

@value primary, secondary from './path/to/variables.css';

.button {
  background: primary;
  display: flex;
}

РЕДАКТИРОВАТЬ:
На самом деле есть еще больше вариантов, все еще через плагины PostCSS. postcss-simple-vars или postcss-custom-properties, последний из которых имеет явное преимущество, чтобы оставаться близким к спецификации CSS. Однако все они имеют одно и то же требование, так или иначе импортируя файл конфигурации.

person Pascal Duez    schedule 20.10.2016
comment
Спасибо. Я это проверю. - person Bruce Mu; 21.10.2016
comment
импортируйте его в свой файл App.scss (держу пари, что он у вас есть) - person devellopah; 23.10.2016
comment
Модули CSS обрабатываются для каждого файла, а не из корневого файла, импортирующего все части, как это делает Sass. Так что это не сработает. Партиал с переменными необходимо импортировать в каждый файл модуля (при необходимости). - person Pascal Duez; 23.10.2016