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

Question

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

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

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

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

Одна вещь, которая делает работу оказывает styles.json файл со следующей установкой WebPack:

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

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

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

Answer 1

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

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

Answer 2

Использование 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); 
}