Ordering imported css file in component - vuejs

So, I have main.js for the main entry point of my application, and I am importing app.scss. It keeps my global css as bootstrap, font-awesome, etc.

/* Vue */
import Vue from 'vue'
import router from './router'
// import store from './store'
import VueResource from 'vue-resource'

Vue.use(VueResource)
Vue.config.productionTip = false

/* App sass */
import './assets/style/app.scss';

/* App component */
import App from './components/App'


new Vue({
    el: '#app',
    // Attach the Vue instance to the window,
    // so it available globally.
    created: function () {
        window.Vue = this
    },
    router,
    // store,
    render: h => h(App)
})

      

        
        
        
      

    

In one of my components, I imported other .scss files something like this:

import '../../../assets/style/echelon/base-user-main.scss';
import '../../../assets/style/echelon/base-helper.scss';

      

        
        
        
      

    

But when the page is displayed in the browser, this order is reversed. app.scss that was imported into my main.js (application entry point) was below my component's .scss something like this:

<style>
/* Content of base-user-main.scss */
</style>

<style>
/* Content of base-helper.scss */
</style>

<style>
/* Content of app.scss */
</style>

      

        
        
        
      

    

Any idea how I can solve this?