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

Question

问题

我有一个大型网站，所以我的 CSS 文件夹结构可能很深。任何 CSS 文件都可以通过 relative 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#)通常会将 baseUrl 附加到图像并在 web.config 中定义 URL。

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

因此，我的 HTML 文件将有部分或全部 URL 构建在服务器端(或至少有 baseUrl 附加服务器端)或可能有 baseUrl 可能通过 Session 或 JavaScript 转换到客户端代码中。

编辑:澄清一下，我并不是说设置类似 http://mysite.com 的东西作为 baseUrl，我会提倡像 ../../../image/ 这样的东西作为我的开发 baseUrl，并在生产时将其转换为 /image/，或类似的东西