title: Vue.js CSS bundle precedence (?)
body: <p>I have a weird issue with Vue.js CLI production bundling where I cannot quite pinpoint the root cause and I appreciate some help.</p>
  
  <p>I have a Vue CLI 3 application with the following (relevant extract) in my main.js:</p>
  
  <pre><code>// Bootstrap
  import "@/assets/bootstrap/bootstrap.scss";
  import "bootstrap-vue/dist/bootstrap-vue.css";
  import BootstrapVue from "bootstrap-vue";
  Vue.use(BootstrapVue);
  
  // Toastr
  import Toastr from "vue-toastr";
  import "vue-toastr/dist/vue-toastr.css";
  Vue.use(Toastr, {
    defaultPosition: "toast-bottom-right"
  });
  </code></pre>
  
  <p><strong>Running this in my dev environment (<code>npm run serve</code>) CSS works fine.</strong></p>
  
  <p>When I run this after the production complilation (<code>npm run build</code>) some classes... are not applied and I cannot reason why. Given that the only difference I can see is the bundling process, I'm incline to look for an issue in that direction.</p>
  
  <p>I customized the bundling as follow (relevant extract) in my vue.config.js:</p>
  
  <pre><code>cacheGroups: {
    icons: {
      name: "icons",
      test: /[\\/]node_modules[\\/](@fortawesome)[\\/]/,
      chunks: "all",
      priority: 3
    },
    vendors: {
       name: "vendors",
       test: /[\\/]node_modules[\\/]/,
       chunks: "all",
       priority: 1
    }
  }
  </code></pre>
  
  <p>And, as result, my CSS bundled are correctly created as follows:</p>
  
  <ul>
  <li>a <strong>vendor</strong> chunk that includes the Toaster CSS.<br />
  This includes a 'toaster' class and a 'toaster-info' class (this latest has just a background-color)</li>
  <li>a <strong>app</strong> chink that include my custom built bootstrap CSS.<br />
  As much as the bootstrap files are in the node_modules folder and, as such, they should go in the previous chink, they get in here because I'm compiling them as import in a the SASS file above that actually comes from by code.<br />
  This includes a 'toaster' class again.</li>
  </ul>
  
  <p>Now, what I can see is that:</p>
  
  <ul>
  <li>both chunks appear to be loaded by the browser</li>
  <li>the markup correctly uses the 'toastr toastr-info'</li>
  <li>only the 'toaster' class from app (bootstrap) is applied</li>
  <li><em>the 'toaster' and 'toaster-info' class are totally ignored by the browser and the background color from 'toaster-info' is not applied</em></li>
  </ul>
  
  <p>I tested this with several browsers to exclude any specific browser weirdness.<br />
  Browser computed styles shows that the classes are "excluded" for some reason I don't understand (with "excluded" meaning are in the style tree but strikethrough).</p>
  
  <p><a href="https://i.stack.imgur.com/wBMom.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wBMom.png" alt="screenshot"></a></p>
  
  <p>Can anyone help me understand why this is happening?</p>
  
  <p>Thank you.</p>