title: webpack to create CSS component-scoped
body: <p>I'm currently learning how to use webpack and I'm struggling a bit with CSS files. Basically, I'm using AngularJs 1.5 and TypeScript to create two components. Each of them have a template that contains a "div" element with the "button" class.</p>
  
  <p>There is also a CSS file for each component that both contain a "class" called "button".</p>
  
  <p>What I would like is to be able to do </p>
  
  <pre><code>require('./file.css')
  </code></pre>
  
  <p>to pack it into the resulting "app.bundle.js" file. This way, no additional requests are needed to load the css files. I succeeded in doing so by simply using "style-loader" and "css-loader".</p>
  
  <p>My problem is that the CSS included in the "app.bundle.js" file is not really component-scoped, so the class "button" stay "button". Therefore, if I include both of my component on the same page, the style of the latest one is applied (two "button" classes are defined in the "style" tag of the page).</p>
  
  <p>However, what I understood from <a href="http://glenmaddern.com/articles/css-modules" rel="nofollow">this article</a>, is that it would generate css with prefixes in the class name used to scope these classes just for the component, but here, the classes name is left untouched creating conflicts.</p>
  
  <p>Is there a way to achieve what I want with webpack?</p>