用grunt打包工具打包css,最后打包的文件中url()路径没变,导致图片加载不出来

由于项目发布需要打包css,所以采用了grunt打包工具。打包css我用到了grunt-contrib-cssmin插件,但是效果不是很理想,有一些文件里面写了相对路径,比如background: url(../../../img/arrow_time.png) no-repeat center; 但是打包后的文件,并没有按照实际位置处理相对路径。
下面是我的文件及配置信息:

打包后的代码放在built/time.min.css中

Gruntfile.js配置如下:

https://img2.mukewang.com/5bfcf8f40001450b07510366.jpg

只打包了两个css文件,其中datepicker.css中含有url信息如下:

https://img.mukewang.com/5bfcf9020001f25405900164.jpg

执行grunt命令后,built/time.min.css如下(直截取了部分图):

https://img2.mukewang.com/5bfcf9100001358111580137.jpg

打包的文件和原路径一致,但是其实现在time.min.css文件位置在built下面,而不是和datepicker.css路径同一层,导致在页面上加载time.min.css时,报错404(图片找不到)。

问题:
cssmin需要怎么配置才能达到预期的效果?
或者换别的插件打包,可以提供类似的相关示例吗?


扬帆大鱼
浏览 813回答 1
1回答

阿波罗的战车

这个问题,关键在于你没有把文件路径设置好,比如你的css里面用的是url('./static/images/cc.png'),等打包的时候,需要设置copy,将静态文件的文件夹也复制过去,这样,打包后的文件里面,css中的url并没有变,但是因为文件复制过来了,所以同样可以找到
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript