Order in output CSS file

[mech-tools]

Hello

Let's assume the following components :

// Vue DevTools would show :
<Root>
  <SubRoot>
    <EndOfTree>

// Component Root
<template>
  <div class=".root-css">
    <sub-root></sub-root>
  </div>
</template>
<script>
  import SubRoot from './SubRoot.vue'
  export default {
    name: 'Root',
    components: { SubRoot }
  }
</script>
<style>.root-css { background-color: blue }</style> // <--- CSS Specific to this component


// Component SubRoot
<template>
  <div class=".sub-root-css">
    <end-of-tree-css></end-of-tree-css>
  </div>
</template>
<script>
  import EndOfTree from './EndOfTree.vue'
  export default {
    name: 'SubRoot',
    components: { EndOfTree }
  }
</script>
<style>.sub-root-css { background-color: red }</style>  // <--- CSS Specific to this component


// Component EndOfTree
<template>
  <div class=".end-of-tree-css">EndOfTree</div>
</template>
<script>
  export default {
    name: 'EndOfTree',
  }
</script>
<style>.end-of-tree-css { background-color: green }</style>  // <--- CSS Specific to this component

The issue : the production build contains the extracted css of all components in the wrong order.

Output CSS file is :

• EndOfTree CSS
• SubRoot CSS
• Root CSS

Desired ouput CSS file :

• Root CSS
• SubRoot CSS
• EndOfTree CSS

This is especially annoying if I have some reset CSS on the root component.

Note : I use vuejs-templates/webpack and vuejs/vue-router

[yyx990803]

Can't reproduce - it outputs the expected order for me. Please provide a reproduction repo.

[zheeeng]

@DarKDinDoN I met the same issue and I find it is because of I imported vue-router configurations which import route components before importing vue main component <app> which is the role as your <root> component.

[christophemarois]

For future reference, @zheeeng fixed my problem. In practice, I had to change in my main.js:

import router from './router'
import 'my-custom-css.css'

to:

import 'my-custom-css.css'
import router from './router'

[greeven]

Thanks @christophemarois for giving your solution with a code example. Was really easy and fast to find a solution because of that.

[soarpatriot]

Thanks @christophemarois

[FossPrime]

How does one deal with this in scss? I have unscoped scss in my app.vue, the order at which it is loaded changes depending on whether I'm on dev (npm start) or production (npm run build)... it is quite tedious.

Update: Known kraken
#808

[chimmelb]

I came across this issue while using bootstrap and vue. Bootstrap overriding our own styles (things looked find in dev).

We fixed by importing bootstrap first, then all the Vue stuff.

// Top of file
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

It worked prior to Bootstrap 4 where we were including styles inside App.vue

<style lang="sass">
  @import ./assets/sass/bootstrap/bootstrap.scss
</style>
<style lang="sass">
  @import ./assets/sass/custom.scss
</style>

That order was respected. When we removed SASS and imported directly in main.js, putting external CSS first in the file fixed the loading order we saw on Production.