SASS Variable Interpolation mit React CSS Modulen

Question

Ich arbeite in einem Projekt, in dem wir React verwenden, wir schreiben unsere Styles mit SASS und lassen dann Webpack den Rest erledigen.

Wir haben erst vor kurzem begonnen, CSS-Module zu verwenden (babel-plugin-react-css-modules um genau zu sein) und der Übergang war glatt, abgesehen von einer Sache.

Vor den CSS-Modulen verwendeten wir die BEM-Namenskonvention. Es wäre oft passieren, dass wir so etwas tun würden, innerhalb einer .scss Datei der Komponente:

$block: '.box'; 

#{$block} { 
    //css rules 

    &#{$block}--modifier { 
     //other rules 
    } 
} 

Im Wesentlichen verwenden wir variable interpolation der SASS-Fähigkeit machen wurden, um weniger zu schreiben, in dem Fall, in dem das block Ebene Element Klassenname war groß.

Das Problem ist, dass, soweit ich sagen kann variable Interpolation, für ein solches Szenario nicht mehr mit babel-plugin-react-css-modules arbeitet.

Ich erhalte eine Fehlermeldung wie

ERROR in ./src/index.jsx 
Module build failed: Error: E:/Mitch/Workspace/Projects/testbed/src/index.jsx: Could not resolve the styleName 'box'. 

Ich verstehe, dass mit scoped CSS-Regeln, gibt es wirklich keine Notwendigkeit mehr so ​​etwas wie .box__list schreiben, da Sie einfach .list schreiben kann, da es auf die Komponente scoped ist , aber nur aus Neugier, ist es möglich, SASS's variable Interpolation mit babel-plugin-react-css-modules arbeiten zu lassen?

Answer 1

CSS-Module ermöglichen Ihnen die Verwendung von Klassennamen und Animationsnamen auf lokaler Ebene. Dies ist seine absolute Funktionalität.

Sie haben auch ein composes Schlüsselwort zur Verfügung gestellt, weil es hilft, selbst genügende Komponentendateien innerhalb einer einzelnen Datei ohne Wiederholung beizubehalten. Dies funktioniert wie SCSS @extends aber anders. Sie können darüber lesen here

Wenn Sie jedoch Variable Interpolation schlecht verwenden möchten, könnten Sie einfach SCSS Präprozessor zu Ihrer Webpack-Konfiguration hinzufügen. babel-plugin-react-css-modules hat das gleiche dokumentiert here

Aber dann ist es nur PostCSS, können Sie alle plugin an Ihre Bedürfnisse anpassen. CSS-Module ist es egal.