如何在Vuejs中使用webpack更正css編譯順序？

Question

我有一個關於使用vue-cli項目的Webpack 2中的css編譯順序的問題。

在main.js中，我導入了一個名為skeleton.css的css庫文件。 這包括<a>顏色樣式。

import Vue from 'vue'
import App from './App'
import router from './router'
import 'skeleton-css/css/skeleton.css'

在App.vue中，我將<a>顏色樣式設置如下

<style lang="scss">
    a {
        text-decoration: none;
        color: #2c3e50;
    }
</style>

當我編譯代碼並打開chrome檢查器時。 我發現錯誤的訂單插入樣式。

<style type="text/css">....</style> // App.vue inline style
<style type="text/css">....</style> // skeleton.css style

我的webpack 2配置了vue-cli

{
    test: /\.scss$/,
    use: [{
        loader: "style-loader"
    }, {
        loader: "css-loader"
    }, {
        loader: "sass-loader"
    }]
}

我該怎么做才能調整正確的導入樣式順序？

Answer 1

您需要重新排序的imports在main.js ，因為它是影響秩序的唯一的事<style>中所產生的DOM標簽：

import 'skeleton-css/css/skeleton.css'
import Vue from 'vue'
import App from './App'
import router from './router'

現在skeleton.css在第一位，其他一切都將在它之后出現。