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

Question

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

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

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

Кнопка /styles.css

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

Answer 1

Из ваших примеров это выглядит как 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 или https://github.com/postcss/postcss-custom-properties, последние имеют явное преимущество в том, чтобы оставаться близкими к спецификации CSS. Все они разделяют одно и то же требование, импортируя файл конфигурации тем или иным способом.

Answer 2

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

В твоей settings.cssфайл, выполните (`:root':

      :root {
    --primary-color: #785372;
    --secondary-corlor: #22b390;
}

Затем вы можете использовать эти константы в том же или другом файле.

      .container {
    color: var(--primary-color);
}

Если вы используете их в другом файле, обязательно импортируйте обе таблицы стилей, например:

      import './Button/styles.css'
import './settings.css'

Кроме того, согласно этому ответу , вы можете сделать это и в html, связав две таблицы стилей:

      <link href="settings.css" rel="stylesheet">
<link href="Button/style.css" rel="stylesheet">