title: Two stylesheets targeting the same element with equal specificity, which takes precedence?
body: <p>I have two stylesheets built from the same .scss files that only differ in a few places. One is a master with all styles and the other is missing a few pieces here and there. These need to coexist, they each have a specific use case and are intended to be downloaded by the user. Because webpack won't bundle CSS on its own, I have to import both of these stylesheets which means they can potentially affect my site. </p>
  
  <p>My index.js is along the lines of</p>
  
  <pre><code>import "./master.scss";
  import "./specific-case.scss";
  </code></pre>
  
  <p>My webpack.config.js is along the lines of</p>
  
  <pre><code>module.exports = {
      ...
      ...
      plugins: [
          specificCaseExtraction,
          masterExtraction,
          ...
  </code></pre>
  
  <p>I'd like the whole application to use master.scss styles, but there are a few places where spceific-case.scss is stepping in an messing up the styling, despite them using the same source (precedence is pretty well defined with the sheets themselves, but they don't play well together which only a problem in this demo application and will never be the case when used properly).</p>
  
  <p>Basically, my question boils down to this: Is there a way to ensure that one stylesheet takes precedence over another? Is it a matter of ordering? I tried swapping them in index.js but it didn't help, and swapping them in webpack.config.js is a bit more complicated because the masterExtraction is called manually while the specificCaseExtraction is actually one of many that is injected dynamically. Or, better yet, is there a way to have webpack compile and package .scss into .css without having the inject it into the page itself?</p>
  
  <p>UPDATE:
  Turns out that in times of equal specificity, the style that's further down the sheet is the one that takes effect. That means that reversing the order of the plugins in the list made the master.css appear <em>below</em> the specific-case.css in the final index.html which means that the master styles always take precedence over any others and my problem is solved.</p>