如何在 Vuejs 中使用 webpack 更正 css 编译顺序? [英] How do I correct the css compile order with webpack in Vuejs?

问题描述

我在使用 vue-cli 项目的 Webpack 2 中遇到了关于 css 编译顺序的问题.

I have a issue about css compile order in Webpack 2 with vue-cli project.

在 main.js 中，我导入了一个名为 skeleton.css 的 css 库文件.这包括 颜色样式.

In main.js, I imported a css library file named skeleton.css . This include <a> color style.

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

在 App.vue 中，我设置了 颜色样式如下

In App.vue, I set <a> color style as below

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

当我编译代码并打开 Chrome 检查器时.我发现了错误的订单插入样式.

When I compiled the code and open the chrome inspector. I found the wrong order insert style.

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

我的 webpack 2 配置和 vue-cli

And my webpack 2 config with vue-cli

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

我应该如何调整正确的导入样式顺序?

How should I do to adjust correct import style order?

推荐答案

您需要对 main.js 中的 imports 重新排序，因为它是唯一影响