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'导入应用组件，而不是 main.js 文件

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

1 个答案: