当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文件将被缩小为files 20130522.css。现在，缩小后的文件驻留在与introToPainting.css不同的文件夹深度中，到brushStroke.jpg的路径现在是错误的。

​

896x672.jpg

​

​

896x672.jpg

​

Answer 1

我通常会为这个服务器端提供服务。

例如，(使用ASP.NET C#)通常会将一个baseUrl附加到图像中，并在web.config中定义URL。

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

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

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