问题

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中定义网址。

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

因此，我的HTML文件将包含部分内容，或构建服务器端的整个URL（或者至少具有baseUrl附加服务器端）或可能将baseUrl投影到客户端代码可能通过Session或JavaScript。

编辑：为了澄清，我并不是说将http://mysite.com设置为baseUrl，我会提倡类似../../../image/之类的东西作为我的开发baseUrl，并翻译这个生产时的/image/或类似的东西

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

问题

实施例

1 个答案: