首页 文章

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

提问于
浏览 次
1

我有一个关于使用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"
    }]
}

我该怎么做才能调整正确的导入样式顺序？

javascript webpack vuejs2

1 回答

  • 6

    您需要重新排序 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 排在第一位，其他一切都将在它之后出现 .

    回复于

相关问题