7

The Problem

I have a large website, so my CSS folder structure can be rather deep. Any CSS file can set an element's background image via a relative URL. Before releasing to my production servers, I need to minify all CSS files. This minification process may break some of the relative URLs because it effectively flattens the folder structure. As a developer, how do you deal with this discrepancy between development and production code?

Example

This is my folder structure:

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

During development, I may have this CSS rule in introToPainting.css:

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

Let's say on a particular simple page, I only need button.css and introToPainting.css. For production release, these two CSS files will be minified into style20130522.css. Now that the minified file resides in a different folder depth than introToPainting.css, the path to brushStroke.jpg is now wrong.

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

Community
  • 1
  • 1
Pwner
  • 3,714
  • 6
  • 41
  • 67
  • 1
    yeah ... store the CSS files u develop on in the same relative folder as the one that would be referenced in production. or use absolute referencing. u cant have relative reference, change the relative positioning, and expect it to magically work. – PlantTheIdea May 22 '13 at 19:14
  • Yeah that seems like the logical choice unless you change all your file paths prior to launch, even is you have folder/folder/css and you put minified in folder/folder/min/ the relative paths would be the same – jamil May 22 '13 at 19:16
  • I can't use an absolute path. I work in a team. Each developer's environment may have a different base URL. – Pwner May 22 '13 at 19:33
  • There is a library that will allow you to preprocess your CSS before it's served so you can change all the paths https://nuget.org/packages/RxLoader/ – Razor Jun 23 '13 at 02:18
  • All CSS preprocessors should update the relative URLs. The fact that they alter the location of the CSS file, knowing full well those URLs are relative to it's original location, without updating those relative URLs... is a bug. – Triynko Nov 11 '15 at 18:26
  • See also: http://stackoverflow.com/questions/11355935/mvc4-stylebundle-not-resolving-images – Triynko Nov 11 '15 at 18:27

1 Answers1

0

I would normally cater for this server side.

For example (using ASP.NET C#) would commonly append a baseUrl to the image and define the URL in the web.config.

I would then use debug or release versions of the web.config to transform the baseUrl appropriately.

As a result, my HTML files would either have parts, or the entirety of the URLs constructed server side (or at least have the baseUrl appended server side) or potentially have the baseUrl projected into client side code perhaps via Session or JavaScript.

EDIT: To clarify, I don't mean setting something like http://mysite.com as a baseUrl, I would advocate something like ../../../image/ as my development baseUrl, and translate this to /image/ when in production, or something similar

dougajmcdonald
  • 19,231
  • 12
  • 56
  • 89
  • A base URL is useless for a CSS file. The url in the CSS file is static, so it cannot be modified (especially if it's a 3rd party plugin). If the paths in CSS files are relative to the CSS file's location, and minification changes the CSS file's location without updating those relative paths, then that's a bug/oversight in the minification process. – Triynko Nov 11 '15 at 18:24