title: SASS variable interpolation with React CSS modules
body: <p>I'm working in a project where we are using React, we are writing our styles with SASS and then let webpack do the rest. </p>
  
  <p>We just recently started using CSS Modules (<a href="https://github.com/gajus/babel-plugin-react-css-modules" rel="nofollow noreferrer"><code>babel-plugin-react-css-modules</code></a> to be exact) and the transition has been smooth, except for one thing.</p>
  
  <p>Before the CSS Modules, we were utilising the BEM naming convention. It would often happen that we would do something like this, inside a component's .scss file:</p>
  
  <pre><code>$block: '.box';
  
  #{$block} {
      //css rules
  
      &amp;#{$block}--modifier {
          //other rules
      }
  }
  </code></pre>
  
  <p>In essence we were making use of SASS's <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#Interpolation_____" rel="nofollow noreferrer">variable interpolation</a> capability, in order to write less in the case where the <code>block</code> level element's class name was big.</p>
  
  <p>The problem is that as far as I can tell variable interpolation, for such a scenario, is no longer working with <code>babel-plugin-react-css-modules</code>. </p>
  
  <p>I am getting an error like </p>
  
  <pre><code>ERROR in ./src/index.jsx
  Module build failed: Error: E:/Mitch/Workspace/Projects/testbed/src/index.jsx: Could not resolve the styleName 'box'.
  </code></pre>
  
  <p>I understand that with scoped CSS rules, there is really no need for writing something like <code>.box__list</code> anymore, since you can simply write <code>.list</code>, since it's scoped to the component, but just for curiosity's sake, is it possible to have SASS's variable interpolation work with <code>babel-plugin-react-css-modules</code> ?</p>