在webpack（css单独提取出来）打包后，背景图路径不对

Question

在webpack（css单独提取出来）打包后，背景图路径不对，怎么办呢？css里面background的url路径是按html页面计算的，但是提取出来后路径应该按照css文件所在目录计算啊，求指点。

Answer 1

fishenal 2017-04-02 19:42:40

npm run build看看最终dist目录 图片是放在哪的。

小图片一般都转成base64，,大的图片应该是有目录要求，其他的目录不会移到最终的项目里。

• 提问者 Charless #1

  谢谢回答，图片都有移动到项目里，html里的正常，css里的路径不对；打包后图片在dist\static\img目录下，样式在dist\static\css目录下，样式背景图background的url路径为 static/img/xxx.jpg，打包后在浏览器硬改成../img/xxx.jpg才能显示出来。

• fishenal 回复 提问者 Charless #2

  我还是没太明白你说的css是单独提取出来是什么意思，vue文件里的css 背景都不会有问题，你是如何把这个css独立的放到static下面的？

• 提问者 Charless 回复 fishenal #3

  实在抱歉，可能我表达得有问题。就是npm run dev一切正常，npm run build后的background-imag的图片不显示（相对路径不正确）。

Answer 2

提问者 Charless 2017-04-02 23:17:11

谢谢回答，打包后图片在dist\static\img目录下，样式在dist\static\css目录下，样式背景图background的url路径为 static/img/xxx.jpg，打包后在浏览器硬改成../img/xxx.jpg才能显示出来。项目是直接vue init webpack初始化的，没有修改默认配置，如果注释掉配置build\utils.js里 用extract-text-webpack-plugin的地方，背景图会显示正常，不过打包后样式会在js文件中，并在html加载时以style标签插入，而且有多少个组件就会写入多少个style标签。不知是vue-loader还是css打包插件还是需要另外的配置？