如何解决webpack css url报错问题

2025-10-26
网站建设限时活动促销

本教程操作环境:Dell G3电脑、Windows7系统、webpack3.0&&css3版本。

推荐:《css视频教程》

webpack中css的url报错?

css-loader:

立即学习“前端免费学习笔记(深入)”;

//打包样式中背景图{ test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[hash:8].[name].[ext]" //limit参数,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录 //name后面是打包后的路径; //loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包, //而是指当图片大小小于限制时会自动转成 base64 码引用 //上例中大于8192字节的图片正常打包,小于8192字节的图片以 base64 的方式引用。},

当小于8192,就打包成base64,那么,大于的就不做处理;

情景:我在main.css中背景图:

.page4-bg{ background:url("../images/page4-bg.jpg") no-repeat center; background-size:cover;}

结果:打包的时候,图片是在dist/images/文件夹下的,但是控制台中却是:

图片没有找到,于是我去查看路径:

貌似图片是加载进来了,好像没什么问题,接着在图片地址上鼠标右击---open in new tab,结果

而我文件图片的目录地址是

这样的,去掉路径中的css,就能够显示图片了

解决方案:

//打包样式中背景图{ test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[hash:8].[name].[ext]", options:{ publicPath:'./images' } //limit参数,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录 //name后面是打包后的路径; //loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成 base64 码引用 //上例中大于8192字节的图片正常打包,小于8192字节的图片以 base64 的方式引用。},

添加publicPath。

标签: webpack中文官网

本文地址:https://www.lifejia.cn/news/210022.html

免责声明:本站内容仅用于学习参考,信息和图片素材来源于互联网,如内容侵权与违规,请联系我们进行删除,我们将在三个工作日内处理。联系邮箱:cloudinto#qq.com(把#换成@)