컴포넌트에 Import된 css 파일의 순서(vuejs)

컴포넌트에 Import된 css 파일의 순서(vuejs)

그래서 저는 제 앱의 메인 엔트리 포인트의 main.js를 가지고 있고 app.scss를 Import합니다.부트스트랩, 폰트어썸 등 글로벌 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했습니다.

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

그러나 페이지가 브라우저에 렌더링되면 순서는 반대입니다.main.scss(앱의 엔트리 포인트)에 Import된 app.scss는 다음과 같이 컴포넌트의 .scss 아래에 있습니다.

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

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

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

내가 이걸 어떻게 해결할 수 있을까?

를 Import 합니다.'./assets/style/app.scss'main.js 파일이 아닌 앱 컴포넌트 내

언급URL : https://stackoverflow.com/questions/43574567/order-of-imported-css-file-in-component-vuejs