如何缩小CSS时处理相对图像URL的变化？

Question

问题

我有一个大型网站,所以我的CSS文件夹结构可能相当深.任何CSS文件都可以通过相对URL设置元素的背景图像.在发布到我的生产服务器之前,我需要缩小所有CSS文件.这种缩小过程可能会破坏一些相对URL,因为它有效地使文件夹结构变平.作为开发人员,您如何处理开发代码和生产代码之间的这种差异？

例

这是我的文件夹结构:

image/
    article/
        brushStroke.jpg
style/
    module/
        button.css
    page/
        article/
            introToPainting.css
    minified/
        style20130522.css

在开发过程中,我可能在introToPainting.css中有这个CSS规则:

#step1 {
    background-image: url(../../../image/article/brushStroke.jpg);
}

让我们说一个特定的简单页面,我只需要button.css和introToPainting.css.对于生产版本,这两个CSS文件将缩小为style20130522.css.现在,精缩文件驻留在不同的文件夹深度比introToPainting.css,路径brushStroke.jpg现在是错误的.

http://scs.veetle.com/soget/session-thumbnails/5363e222d2e10/0eaf8f26f193375f97b7deeabae97016/5363e222d2e10_0eaf8f26f193375f97b7deeabae97016_20140509184555_536d84d367530_74_896x672.jpg

http://scs.veetle.com/soget/session-thumbnails/534711b951df7/60d40fd7ca34cf794237c5ec8cb4ff6d/534711b951df7_60d40fd7ca34cf794237c5ec8cb4ff6d_20140521112148_537ceebcd74e0_98_896x672.jpg

Answer 1

我通常会满足这个服务器端的需求。

例如（使用 ASP.NET C#）通常会将 a 附加baseUrl到图像并在web.config.

然后，我将使用调试或发布版本web.config来适当地转换 baseUrl。

因此，我的 HTML 文件要么具有服务器端构造的部分或全部 URL（或者至少具有附加baseUrl的服务器端），baseUrl要么可能通过会话或 JavaScript 投影到客户端代码中。

编辑：为了澄清，我并不是说将http://mysite.com这样的内容设置为 baseUrl，我会提倡将其../../../image/作为我的开发 baseUrl 之类的内容，并将其转换为/image/生产时或类似的内容