與上海社會科學院的變量插值陣營CSS模塊

Question

我在一個項目上工作，我們使用的反應，我們正在編寫我們與上海社會科學院樣式，然後讓的WebPack做休息。

我們最近剛開始使用CSS模塊（babel-plugin-react-css-modules是精確的）和過渡是平滑的，除了一兩件事。

的CSS模塊之前，我們利用BEM命名約定。它會經常發生，我們會做這樣的事情，一個組件的.scss文件中：

$block: '.box'; 

#{$block} { 
    //css rules 

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

在我們利用上海社會科學院的variable interpolation能力，爲了寫更少的情況下本質其中block級元素班級名字很大。

的問題是，據我可以告訴變量插值，對於這樣的情況下，不再與babel-plugin-react-css-modules工作。

我得到了如下的錯誤

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

據我所知，有範圍的CSS規則，我們實在沒有必要寫東西像.box__list了，因爲你可以簡單的寫.list，因爲它的作用範圍是組件，但只是出於好奇，是否可以讓SASS的可變插值與babel-plugin-react-css-modules一起工作？

Answer 1

CSS模塊允許您使用本地範圍的類名稱和動畫名稱。這是它的絕對功能。

他們還提供了composes關鍵字，因爲它有助於保持自我單個文件內具有足夠的分量文件，而無需重複。這與SCSS @extends的工作方式不同。 你可以閱讀關於它here

但是，如果你想使用可變插值，你可以添加SCSS預處理器到你的webpack配置。 babel-plugin-react-css-modules有記載相同here

但是，那麼它只是PostCSS，您可以添加任何plugin，以滿足您的需求。 CSS模塊不關心。