css module & cssnext benutzerdefinierte Eigenschaften in react + webpack

Question

Ich frage mich nur, was wäre der beste Ansatz für die Verwendung von cssnext benutzerdefinierte Eigenschaften wie diese, neben CSS-Module in reagieren.

Gibt es eine Möglichkeit, diese Module zu teilen?

: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: *** ok ich schon versucht, diese, dachte, es funktioniert, aber hat nicht

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

Answer 1

CSS Module sollten nur Selektoren behandeln, die Klassennamen sind (das mit einem Punkt beginnen). Es sollte also kein Problem sein und Sie sollten diese benutzerdefinierte Definition verwenden können, sobald sie sich in der Datei befinden. Sie können postcss-import verwenden, um Ihre Datei mit globalen Definitionen zu verknüpfen.

Eine andere Lösung ist es, diese globalen Werte mit postcss Plugin Optionen zu definieren: nur

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

Answer 2

Da der postcss-Lader zu einer Zeit, eine einzelne Datei verwandelt Sie importieren müssen Ihre benutzerdefinierten Eigenschaften, z

@import './root.css'; 

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