解决vuejs项目里css引用背景图片不能显示的问题

html-css05

解决vuejs项目里css引用背景图片不能显示的问题,第1张

解决:build->utils.js里,修改:增加

publicPath:'../../',

if

(options.extract)

{

return

ExtractTextPlugin.extract({

use:

loaders,

publicPath:'../../',

fallback:

'vue-style-loader'

})

}

else

{

return

['vue-style-loader'].concat(loaders)

}

以上这篇解决vuejs项目里css引用背景图片不能显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:解决vue打包之后静态资源图片失效的问题解决vue打包css文件中背景图片的路径问题详谈vue+webpack解决css引用图片打包后找不到资源文件的问题vue

cli使用绝对路径引用图片问题的解决关于Vue背景图打包之后访问路径错误问题的解决

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

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

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

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

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

原文地址和更多信息:

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

<el-table-column>并不是一个dom节点,所以infotext这个类究竟用在哪,需要看下el-table-column这个组件的实现才知道。

用了第三方组件的必然都会遇到你这样的问题,我说下我的解决方法,不一定是好的。

一个vue文件可以写多个<style></style>,加上socped代表本组件的样式,不污染全局。如果需要覆盖第三方组件样式,则不能加scoped,因此需要另写一个<style>.xxx-component{...}</style>,这里用一个大类包裹防止污染全局。

接着,我用比较笨的方法(有好的方法请告知),就是打开f12检查究竟要覆盖哪些样式,然后写在没有加scoped的style里即可。

其实一些好的第三方UI库都有提供自定义样式的方法的,这样实现起来才是最便捷的。