css modules & cssnext custom properties in response + webpack

Question

Мне просто интересно, какой был бы лучший подход к использованию пользовательских свойств cssnext, подобных этим, наряду с модулями css в реагировании.

Есть ли способ поделиться ими по всем модулям?

:root{ 
    --primary: pink; 
    --fontSize: 1rem; 
    --fullWidth: 100%; 
    --color: red; 
    --gutter: 1.618rem; 
} 
@custom-media --small-viewport (max-width: 30em); 
@custom-media --large-viewport (min-width: 75em); 
@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px); 

EDIT: *** ок я попробовал это, подумал он работал, но не имеет

:global(:root) { 
    --primary: pink; 
    --fontSize: 1rem; 
    --fullWidth: 100%; 
    --color: pink; 
    --gutter: 1.618rem; 
} 

Answer 1

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

Другим решением является определить эти глобальные значения с помощью опций postcss плагина:

• https://github.com/postcss/postcss-custom-properties#variables
• https://github.com/postcss/postcss-custom-media#extensions

Answer 2

Поскольку postcss-погрузчик только преобразует один файл в то время, вы должны импортировать ваши пользовательские свойства, например

@import './root.css'; 

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