如果使用grails资产管道插件，如何处理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

问题是:在这种情况下如何使用asset-pipeline。

1:将css放在assets/stylesheets下，将img文件夹放在assets/images文件夹下？它能工作吗？

2:将css文件和img文件夹都放到assets/stylesheets文件夹中，我很确定它可以工作，但是资源管道可以对其进行gzip吗？

我不擅长js/css，我花了很多时间在Youtube上阅读Asset-Pipeline文档和视频，但我仍然不知道如何正确使用它。

提前进行thx

Answer 1

这里有一些你可以做的事情：

如果您希望利用资产管道插件提供的组织结构，请将.css文件放在assets/stylesheets目录中，将图像放在assets/images目录中，并将./img/digit-lg.png的任何引用更改为digit-lg.png (您也可以指定/assets/digit-lg.png或/assets/images/digit-lg.png，以获得相同的结果)。下面是目录结构应该是什么样子：

├── assets
│   ├── images
│   │   ├── digit-lg.png
│   ├── javascripts
│   └── stylesheets
│       └── jquery.flipcountdown.css

在解析资产时，grails资产管道会忽略顶级图像、javascripts和stylesheets文件夹，因为它们纯粹是出于组织目的。

或者，由于这是一个第三方样式表，最好保持.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压缩。

Answer 2

。

特别是application.js和application.css，其中包含了外部库。

只需从github克隆应用程序，运行- app，并点击首页。您应该在索引页面中看到一个倒计时时钟。