由于项目发布需要打包css,所以采用了grunt打包工具。打包css我用到了grunt-contrib-cssmin插件,但是效果不是很理想,有一些文件里面写了相对路径,比如background: url(../../../img/arrow_time.png) no-repeat center; 但是打包后的文件,并没有按照实际位置处理相对路径。
下面是我的文件及配置信息:
打包后的代码放在built/time.min.css中
Gruntfile.js配置如下:
只打包了两个css文件,其中datepicker.css中含有url信息如下:
执行grunt命令后,built/time.min.css如下(直截取了部分图):
打包的文件和原路径一致,但是其实现在time.min.css文件位置在built下面,而不是和datepicker.css路径同一层,导致在页面上加载time.min.css时,报错404(图片找不到)。
问题:
cssmin需要怎么配置才能达到预期的效果?
或者换别的插件打包,可以提供类似的相关示例吗?
这个问题,关键在于你没有把文件路径设置好,比如你的css里面用的是url('./static/images/cc.png'),等打包的时候,需要设置copy,将静态文件的文件夹也复制过去,这样,打包后的文件里面,css中的url并没有变,但是因为文件复制过来了,所以同样可以找到