css - When using YUI Compression viaChirpy to Mash Css files how can I get round relative URLs?

Question

I am attempting to use Chirpy to mash all the CSS files from various sub directories into a single file.

This works to the extent that I get a single minified file containing all of the CSS.

The problem I am having is that the CSS files that are referenced contain relative paths to images so when mashed the resulting file contains CSS with invalid image references.

For example:

<!-- Jquery -->
<File Path="ThirdParty\Jquery\jquery-ui-1.8.custom.css" />
<File Path="ThirdParty\Jquery\Plugins\colorbox\colorbox.css" />

<!-- Ext -->
<File Path="ThirdParty\Ext_3.2.1\ux\LockingGridView.css" />
<File Path="ThirdParty\Ext_3.2.1\plugins\Schedule_1.7\css\sch-all.css" />

Each of these files contains entries along the lines of:

.ui-widget-header { url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) }

When this entry gets "Mashed" into a central file in another location the url is no longer valid.

Does anyone know of a way around this other than updating all of the urls in every CSS file?

(I am wondering whether the YUI compression tool via chirpy can do this for me).

I would like to avoid absolute urls because the site code is re-used in sub directories on the same web server.

Answer 1

我建议切换到 Sass / SCSS 并结合Scout App。这样，您可以在主文件中 @include 所有帮助文件（如 mixins 或主题），这些文件被编译并缩小到单个 css 文件中。

所有的 css 文件都可以像 scss 一样无缝地工作，所以不用头疼。

这次升级后，我的编码（和生活）有了很大的改善。