渲染的组件的父盒子的class='item'影响了css样式的内容，把class='item'修改成比如：class='abc'就可以了。
站在用户的角度思考问题，与客户深入沟通，找到禄劝网站设计与禄劝网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站建设、成都网站设计、企业官网、英文网站、手机端网站、网站推广、域名与空间、网络空间、企业邮箱。业务覆盖禄劝地区。
三人行慕课
最近发现一个比较奇怪的问题，就是在开发vue中，路由点击跳转到另外一个组件中，样式是不出来的，然后刷新当前页面css样式才加载出来，找了好久才发现这个bug。
进入以后样式是这样的：css样式根本没有加载，这是为什么？
刷新了页面以后才可以出来，本身样式也是这样的：
找了半天原因，一点一点测试才发现
原来渲染的组件的父盒子的class='item'居然影响了css样式的内容，很奇怪，把class='item'修改成比如：class='abc'就可以了。
原文地址和更多信息：
单文件组件样式 RFC 为 Vue 开发人员提供了一种将组件的响应数据用作 CSS 变量的方法。
更复杂的数据结构，假设我们有一个名为 font 的对象，并且其中有一个名为 weight 的属性。
Vue 提供了内置的响应式系统，我们只需要修改响应式中的数据，便可以动态的修改页面中的外观。
使用到了 CSS 变量 ，我们样式中的 v-bind 最终将被编译为使用 CSS var 语法和我们的新 CSS 变量。
如果您希望在生产环境中实现这一点，请确保检查浏览器对 CSS 变量的支持。
如果没有 CSS 变量，SFC 样式变量将无法工作，因此如果您的应用程序需要支持某些较旧的浏览器，这对您来说可能不是一个可行的选择。
以下是 CSS 变量 支持情况：
vue文件中 css样式怎么 独立出一个单文件
template
div.../div
/template
script lang='coffee'
a = 123
/script
style lang='less'
a {
display: none
}
/style
vue－loader 后 会把style 样式通过打包后的js文件 添加到 页面
vue: {
css: ExtractTextPlugin.extract("css"),
less: ExtractTextPlugin.extract("css!less-loader")
},
