如果使用grails asset-pipeline插件,如何处理css中的图像位置？

Question

jquery.flipcountdown.css文件是:

.xdsoft_flipcountdown.xdsoft_size_lg >.xdsoft_digit{
width:53px; 
height:76px;
background-image:url(./img/digit-lg.png);
}

目录结构是

+flipcountdown-master
 + img
   - digit-lg.png
 - jquery.flipcountdown.css

问题是:在这种情况下如何使用资产管道.

1:将css放在assets/stylesheets下,并将img文件夹放在assets/images文件夹下？可以工作吗？

2:把css文件和img文件夹全部放到assets/stylesheets文件夹中,我很确定它可以工作,但是资产管道可以gzip吗？

我不擅长JS/CSS和我花了很多时间来阅读资产管道doc和YouTube上的视频,但我仍然不知道如何以正确的方式使用它.

thx提前

Answer 1

你可以在这里做一些事情:

如果要利用资产管道插件提供的组织结构,请将.css文件放在assets/stylesheets目录中,将图像放在assets/images目录中,并更改./img/digit-lg.pngto的任何引用digit-lg.png(您也可以指定/assets/digit-lg.png或/assets/images/digit-lg.png获取相同的内容)结果).这是目录结构应该是什么样子:

??? assets
?   ??? images
?   ?   ??? digit-lg.png
?   ??? javascripts
?   ??? stylesheets
?       ??? jquery.flipcountdown.css

grails资产管道在解析资产时会忽略顶级图像,javascripts和样式表文件夹,因为它们纯粹是出于组织目的.

或者,由于这是第三方样式表,因此最好保持.css文件不被修改,并保持自包含.你可以只添加flipcountdown-master目录无论是assets/目录或assets/stylesheets/,保持CSS背景图片的URL设置./img/digit-lg.png,一切都应该正常工作.这是这种情况下的结构:

??? assets
?   ??? images
?   ??? javascripts
?   ??? stylesheets
?       ??? flipcountdown-master
?           ??? img
?               ??? digit-lg.png
?           ??? jquery.flipcountdown.css

资产管道非常灵活,但是您觉得组织资产最为舒适,不仅有一种方法可以做.管道选择的任何文件都有资格进行gzip压缩.