Wie korrigiere ich die CSS-Kompilierreihenfolge mit Webpack in Vuejs?

Question

Ich habe ein Problem über die CSS-Kompilierreihenfolge in Webpack 2 mit VUE-CLI-Projekt.

In main.js habe ich eine CSS-Bibliotheksdatei mit dem Namen skeleton.css importiert. Dazu gehören <a> Farbstil.

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

In App.vue, habe ich <a> Farbe, Stil, wie unten

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

Wenn ich den Code und öffnen Sie das Chrom Inspektor zusammengestellt. Ich habe die falsche Reihenfolge gefunden.

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

Und mein webpack 2 Config mit vue-cli

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

Wie soll ich richtig Import Stil anzupassen, um zu tun?

Answer 1

Sie müssen die imports in Ihrem main.js neu anzuordnen, da es das einzige ist, der die Reihenfolge der <style>-Tags in der resultierenden DOM beeinflusst:

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

Jetzt skeleton.css kommt zuerst, und alles andere würde kommen, nachdem es .