登录

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

由于项目发布需要打包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需要怎么配置才能达到预期的效果?
或者换别的插件打包,可以提供类似的相关示例吗?

# JavaScript
PHP中文网PHP中文网2130 天前324 次浏览

全部回复(1) 我要回复

  • ringa_lee

    ringa_lee2017-04-11 12:47:37

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

    回复
    0
  • 取消回复发送