如果使用 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

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

1：css放在assets/stylesheets下，img文件夹放在assets/images文件夹下？可以吗？

2：把css文件和img文件夹都放到assets/stylesheets文件夹里，我很确定可以用，但是asset-pipeline可以gzip吗？

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

提前谢谢

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 资产管道在解析资产时会忽略顶级图像、javascript 和样式表文件夹，因为它们纯粹用于组织目的。

或者，由于这是一个第三方样式表，最好保持.css 文件不被修改，并保持独立。您可以将flipcountdown-master 目录添加到assets/ 目录或assets/stylesheets/，保持css background-image url 设置为./img/digit-lg.png，一切都会正常工作。这是这种情况下的结构：

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

资产管道非常灵活，可以让您以最舒适的方式组织资产，但做事的方式不止一种。管道提取的任何文件都可以进行 gzip 压缩。

Answer 2

Here is the sample app.

特别查看包含外部库的application.js 和application.css。

只需从 github 克隆应用程序，运行应用程序，然后点击索引页面。您应该会在索引页面中看到一个倒计时。