vue.js - 组件中导入css文件的顺序 - vuejs

Question

所以我有 main.js 作为我的应用程序的主要入口点，我导入了一个 app.scss。它包含我的全局 css，如 bootstrap、font-awesome 等。

/* 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'导入到您的App组件中，而不是在您的ma​​in.js文件中