title: Keeping CSS files separate with webpacker:compile
body: <p>I have a Rails/Webpacker/Vue app where I want to have different styles on each page.  That may look like this:</p>
  
  <pre><code>// page-a.vue
  &lt;style lang="scss"&gt;
    @import './stylesheets/a';
  &lt;/style&gt;
  
  
  
  // page-b.vue
  &lt;style lang="scss"&gt;
    @import './stylesheets/b';
  &lt;/style&gt;
  </code></pre>
  
  <p>These stylesheets have completely separate rules that should not mix.</p>
  
  <p>In development with <code>webpack-dev-server</code>, the stylesheets remain separate as expected.  However, when <code>webpacker:compile</code> is run, the stylesheets merge and all the CSS is used by both files.</p>
  
  <hr>
  
  <p>Because of this, deploying to production is causing my application to look vastly different than in development.  </p>
  
  <p>How can I keep CSS files separate when using <code>webpacker:compile</code>?</p>