webpack单独提取css,url-loader生成图片的路径正确,css中图片的路径不正确

发布于 2022-09-03 14:17:15 字数 674 浏览 19 评论 0

我在js中使用require("layer-dialog/src/skin/layer.css");引用css,该css中引用了layer-dialog/src/skin/default/icon.png,然后我在webpack.config.js中做了如下配置:

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'url',
    query: {
        limit: 15000,
        name: 'imgs/[name].[ext]?[hash:7]'
    }
}

编译后图片正确的生成在了指定的路径上,但是css的路径不对,
文件生成的实际的路径是D:\demo\imgs\node_modules\layer-dialog\src\skin\default\icon.png
但是css中图片的路径变成了是/imgs/node_moduleslayer-dialogsrcskindefaulticon.png
没有了路径的斜杠“/”

所以很头疼不知道怎么解决。

补充:
我后来看了打包后的js文件,里面路径是这样的:

"imgs/node_modules\\\\layer-dialog\\\\src\\\\skin\\\\default\\\\icon.png?551539f"

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

我一向站在原地 2022-09-10 14:17:15

我也遇到了同样的问题,头好疼。 楼主解决了吗? 求解决方案

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文