title: Nesting SCSS Rules in VueJS Modules
body: <p>How can I handle nested SCSS rules, which expand on a base style, when dealing with the CSS Modules to import styles to the local component?</p>
  
  <p>In my case, I have the following two SCSS files:</p>
  
  <p><strong>icon.scss</strong></p>
  
  <pre><code>.my-icon {
    // base styles for an icon
  }
  </code></pre>
  
  <p><strong>button.scss</strong></p>
  
  <pre><code>.my-button {
    ...
    .my-icon {
      // special styles when an icon is in a button
    }
  }
  </code></pre>
  
  <p>Which I then import into their respective components:</p>
  
  <p><strong>MyIcon.vue</strong></p>
  
  <pre><code>&lt;template&gt;&lt;i class="my-icon" /&gt;&lt;/template&gt;
  &lt;style lang="scss" module&gt;
  @import '/path/to/icon.scss'
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>MyButton.vue</strong></p>
  
  <pre><code>&lt;template&gt;&lt;button class="my-button"&gt;&lt;slot /&gt;&lt;/button&gt;&lt;/template&gt;
  &lt;style lang="scss" module&gt;
  @import '/path/to/button.scss'
  &lt;/style&gt;
  </code></pre>
  
  <p>The trouble is that the <em>nested</em> <code>.my-icon</code> class, in 'button.scss', generates a different hash ('._2XJ5') than the root <code>.my-icon</code> class, in 'icon.scss' (._2UFd). So, when I attempt to embed an icon into a button I get an output that looks like this:</p>
  
  <pre><code>&lt;button class="._3S2w"&gt;&lt;i class="._2UFd" /&gt;&lt;/button&gt;
  </code></pre>
  
  <p>Which is correct, but the "special styles" for an icon in a button are not applied, because that class was generated as a different hash.</p>
  
  <p>How do I make sure the hash value for '.my-icon' always comes out the same?</p>