title: How do you render nested SASS in webpack?
body: <p>Take the following css... </p>
  
  <pre><code>.MyComponent {
  
    color: blue;
    .Button {
      color: red;
    }
  }
  </code></pre>
  
  <p>And the following React component... </p>
  
  <pre><code>import React from 'react'
  import classes from './MyComponent.scss'
  
  export const MyComponent = props =&gt;
    &lt;div className={classes.MyComponent}&gt;
      &lt;button className={classes.Button}&gt;My Button&lt;/button&gt;
    &lt;/div&gt;
  
  export default MyComponent
  </code></pre>
  
  <p>The styles for <code>.Button</code> don't seem to be applied. </p>
  
  <p>I'm using postcss-loader, sass-loader, style-loader and node-sass in my Webpack set-up. </p>