vue.js - vue文件中style优先级为什么最低？

问题描述

问 题

环境是vue2+webpack2，我引用了bootstrap，我想定制它的一些css属性于是就在.vue文件中修改

<style scoped>
    .dropdown-menu{
        min-width: 100px;
        border: none;
        font-size: 14px;
        padding-left: 5px;
        box-shadow: 0 6px 12px rgba(0,0,0,.175);
    }
</style>

但是没有效果，查看了一下，在style中的css优先级是最低的，因为他是第一个link的。如果不把css分离，它会在第一个style标签里面，见下图

webpack的entry属性：

  entry: {
    vendor: ['jqueryVendor','bootstrap','font-awesome','animate.css','datatables.net','datatables.net-bs','datatables.net-buttons','datatables.net-buttons-bs','datatables.net-fixedheader','datatables.net-fixedheader-bs','datatables.net-responsive','datatables.net-responsive-bs','datatables.net-scroller','datatables.net-scroller-bs','datatables.net-keytable'],
    app: './src/main.js'
  },

这里我用了webpack.optimize.CommonsChunkPlugin和ExtractTextPlugin，之前我是没有使用这些插件，现在使用是为了解决这个问题，修改过的，想把vendor中的css和我自己的css分开，但是不成功，独立css只有我自己写的，没有vendor.css 不知道为什么，这也是一个疑惑点。先关心上面那个问题。

vendor中的css, 我是在main.js中引入的，算是最早的。而我自己的style代码， 是要经过操作，选中路由之后，再加载Datatable.vue(包含上面style代码的文件名)才会显示的。理解webpack是按需加载，但这个过程就说不通了。
是不是vue-loader处理vue文件比其他的js文件早，没有时间研究webpack的源码，我理解的webpack是中entry进去，根据依赖建立依赖树，那这样vendor的css是先拿的

我用的bower管理前端的包，用了BowerWebpackPlugin插件

    new BowerWebpackPlugin({
      modulesDirectories: ["bower_components"],
      manifestFiles:      "bower.json",
      includes:           /.*/,
      excludes:           [],
      searchResolveModulesDirectories: true
    })

Google也没找到类似的问题，大家能帮忙分析分析，我这里是哪里有问题，原理是什么？

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

又看了下webpack的文档，有些体会，我在vue-router的时候异步加载组件，然后解决了这个问题，但是也有新的问题，异步加载不能分离css了，scoped不能行，继续研究，谢谢大家的帮助

这篇关于vue.js - vue文件中style优先级为什么最低？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！