Web essentials changing relative paths in compiled css

Question

I am using Web Essentials 2013 in a project to compile less to css on build/save. However, I am having problems with that when compiling, WE is tampering the relative paths to fonts/images etc.

For example:

.footer {
    background: url('../img/footer_background.svg') no-repeat top center;
 }

becomes:

.footer {
  background: url('img/footer_background.svg') no-repeat top center;
}

I recall having a simillar issue before, but settings "Adjust relative paths" to false in web essentials CSS options fixed it then. It doesn't seem to do it now. I have tried both the latest stable and the latest nightly, both giving same behavior.

Any suggestions? :)

Answer 1

I know you mentioned 2013, but I had this same problem in 2015 and found if I set "relativeUrls": false in compilerconfig.json.defaults then the mentioned issue stops. For reference I'm using VS 2015 Pro upd2 and Web Compiler extension v1.11.315.

Answer 2

mlhDev's answer is close, but I actually had to change this in the compilerconfig.json file, NOT the defaults file, per the project's GitHub issue. My config looks like:

[
  {
    "outputFile": "StyleSheets/something.css",
    "inputFile": "StyleSheets/scss/something.scss",
    "options": {
        "relativeUrls": false
    }
  }
]

I'm using Visual Studio Enterprise 2015 for reference, but should work in other versions.

Answer 3

I've run into this as well. It used to a problem in earlier versions of Web Essentials, but was eventually fixed. Now it seems to have cropped back up in 2013.

One way that I've seen to fix this is to escape the url path, which causes the less compiler to treat the value as a string literal, which it passes through as-is without touching it.

ex: background-image: ~"url('../../../img/foo.png')";

will emit as: background-image: url('../../../img/foo.png');

Answer 4

In case anyone still runs into this, in your bundleconfig.json add the adjustRelativePaths key to the minification options as follows:

"minify": { "enabled": true, "adjustRelativePaths": false }

This key is used in the BundleHandler static class here, look at the method AdjustRelativePaths.