如何使用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至上，一切会来后， 。