如何在 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 是第一位的，其他的都会在它之后。