title: Vue CSS Modules
body: <p>I've been trying to come up with a solution for our component library that will render styles differently based on the project it is imported into. In my research I've found a possible solution in CSS Modules. The problem I'm currently facing is when I use named modules they compile down to the same css class so styles in two different named modules are overwriting each other. The documentation on Vue's website is very slim so I'm unsure if I'm currently implementing my code correctly. Can someone let me know if I'm missing something or if they have had a similar issue before?</p>
  
  <pre><code>&lt;template&gt;
    &lt;button :class="a.button" type="button" v-on="$listeners"&gt;
      &lt;slot/&gt;
    &lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    console.log(this.a, this.b)
  }
  &lt;/script&gt;
  
  &lt;style module="a"&gt;
  .button {
    background-color: red;
  }
  /* identifiers injected as a */
  &lt;/style&gt;
  
  &lt;style module="b"&gt;
  .button {
    background-color: blue;
  }
  /* identifiers injected as b */
  &lt;/style&gt;
  </code></pre>
  
  <p>In my <code>console.log(this.a, this.b)</code> the console returns both rendered class names as the same <code>{button: "index_button_2JdpP"} {button: "index_button_2JdpP"}</code> so clearly there is an issue in my code or I'm misunderstanding the purpose of naming a CSS module.</p>