怎样解决webpack css url报错题目
发布时间:01/01 来源:未知 浏览:
关键词:
webpack css url报错是由于图片加载途径错误,其解决方法:第一翻开响应的代码文件;然后打包样式中的背景图;最后从新增加publicPath即可。
本教程操纵环境: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/文件夹下的,但是操纵台中却是:
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报错问题的具体内容,更多请关注百分百源码网其它相关文章!