Могу ли я иметь один файл переменных, используя cssnext с webpack?

Question

У меня есть проект, который имеет набор CSS-файлов (по одному для каждого реагирующего компонента). Я использую css-загрузчик (с модулями) в webpack, а также postcss-cssnext.

В идеале я хочу сингл variables.css так что я могу обмениваться переменными между файлами CSS. Я пытался variables.css содержащий что-то вроде:

:root {
  --gutter-width: 1rem;
  --outer-margin: 2rem;
  ...
}

который я затем импортирую, чтобы он прошел через загрузчик CSS. Проблема в том, что другие файлы не распознают эти переменные, так что либо это не работает, либо я делаю что-то не так (в том числе это непосредственно в файле css компонента работает).

Одна вещь, которая работает, имеет styles.json файл со следующей настройкой веб-пакета:

postcss: function (webpack) {
    return [
        ...
        require("postcss-cssnext")({
          features: {
            customProperties: {
              variables: require('./src/styles.json')
            }
          }
        })
        ...
    ]
}

Однако основная проблема в этом заключается в том, что каждый раз, когда я меняю переменную, мне приходится перезапускать сервер разработки веб-пакетов (поэтому перезагружаем конфигурацию веб-пакета). Это не идеально.

Итак, есть какие-нибудь мысли о лучшем способе сделать это?

Answer 1

С помощью postcss-import это путь Вот пример конфигурации с использованием модулей CSS:

{ 
  test: /\.css$/,
  loader: ExtractTextPlugin.extract(
    "style",
    "css?modules&localIdentName=[name]--[local]&sourceMap&importLoaders=1!postcss"
  )
}

И в ваших настройках postcss:

postcss: [
  require("postcss-import")({
    path: baseDir,
    addDependencyTo: webpack
  }), 
  require("postcss-cssnext")
]

path установка говорит postcss-import разрешить пути, также просматривая каталоги, указанные здесь.

И, наконец, в вашем файле модуля CSS, скажем Button.css:

@import "styles/constants/constants.css";

.normal {
  font-size: 24px;
  color: var(--figmaBlue);
}

Answer 2

Переменные (по крайней мере, на данный момент) не передаются между импортированными файлами css в cssnext-loader, даже если вы помещаете их в:root {}.

Самое простое решение, которое я нашел, это использовать плагин postcss-import перед postcss-cssnext. После настройки вам нужно будет
@import 'variables.css';
внутри.css файлов, где вы хотите получить доступ к этим переменным.