如何使用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

你需要在你的main.js重新排序imports，因爲它是影響所產生的DOM的<style>標籤順序的唯一的事：

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

現在skeleton.css至上，一切會來後， 。