javascript - How do I correct the css compile order with webpack in Vuejs? - Stack Overflow

admin管理员组

文章数量:1312907

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

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'

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

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

When I piled 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

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?

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

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'

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

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

When I piled 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

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?

• javascript
• webpack
• vuejs2

Share Improve this question Follow edited Apr 26, 2017 at 8:22 R. Oosterholt 8,12033 gold badges5656 silver badges7878 bronze badges asked Apr 26, 2017 at 8:19 tommychootommychoo 66333 gold badges1212 silver badges2121 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

You need reorder the imports in your main.js, since it is the only thing that affects the order of <style> tags in the resulting DOM:

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

Now skeleton.css es first, and everything else would e after it.

本文标签： javascriptHow do I correct the css compile order with webpack in VuejsStack Overflow