如何在Vuejs中使用webpack更正css编译顺序？

Question

我有一个关于使用vue-cli项目的Webpack 2中的css编译顺序的问题.

在main.js中,我导入了一个名为的css库文件skeleton.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是第一个,其他一切都将在它之后.