这篇文章主要介绍webpack css url报错怎么办，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
webpack css url报错是因为图片加载路径错误，其解决办法：首先打开相应的代码文件；然后打包样式中的背景图；最后重新添加publicPath即可。
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/文件夹下的，但是控制台中却是：
Failed to load resource:the server responded with a status of
404(Not Found)
图片没有找到，于是我去查看路径：
貌似图片是加载进来了，好像没什么问题，接着在图片地址上鼠标右击---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 css url报错怎么办”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
