組件導入的CSS文件的順序 - vuejs

Question

因此，我有我的應用程序的主要入口點main.js，我導入一個app.scss。它擁有像我的引導，字體真棒等全局CSS

/* 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's available globally. 
    created: function() { 
     window.Vue = this 
    }, 
    router, 
    // store, 
    render: h => h(App) 
}) 

在我的組件之一，我導入到另一.scss文件是這樣的：

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

但當頁面呈現給瀏覽器，該訂單是相反的。那是我main.js（應用程序的入口點）進口app.scss是我的分量像這樣的.scss如下：

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

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

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

任何想法，我怎麼能解決這個問題？

Answer 1

導入您'./assets/style/app.scss'您應用組件內，而不是在你的main.js文件