vue.js怎么实现css样式表按需加载

html-css07

vue.js怎么实现css样式表按需加载,第1张

按需加载,可样式是写在.vue模板中的,访问另一个页面样式就会追加到head标签中,访问的越多head标签的style标签也就越多,即便style标签加入scoped可以避免样式冲突:

后来我查了下有使用extract-text-webpack-plugin将css提取合并的。

这个代码:

import 'xx.css' or require('xx.css')

最近发现一个比较奇怪的问题,就是在开发vue中,路由点击跳转到另外一个组件中,样式是不出来的,然后刷新当前页面css样式才加载出来,找了好久才发现这个bug。

进入以后样式是这样的:css样式根本没有加载,这是为什么?

刷新了页面以后才可以出来,本身样式也是这样的:

找了半天原因,一点一点测试才发现

原来渲染的组件的父盒子的class='item'居然影响了css样式的内容,很奇怪,把class='item'修改成比如:class='abc'就可以了。

原文地址和更多信息:

https://www.3mooc.com/front/articleinfo/465