Web essentials changing relative paths in compiled css - 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.

Answer 5

I use Web Essentials for LESS as well, and while I haven't seen it do this, I have a better solution for you. Rather than writing paths out in your code, especially if all you're changing is just the file name at the end, try using a variable for your paths.
Example:
#imgURL: "../img";
Then to use it, all you need is:
.footer{
background: url("#{imgURL}/footer_background.svg");
}

Answer 6

I am experiencing this same issue with bootstrap, which uses relative paths for fonts. I believe the issue lies with node-sass or libsass.
I have been unable to find information about relative path rewrites in either library, however. If it can be fixed, then a fix might be to drop in a new node-sass version.
Unfortunately, I can't find where WebEssentials is installed on my system to test this out.
I just realized you are having issues with the LESS compiler, not SASS. I wonder if the issue has more to do with the CSS minifier now.
I changed my "Custom output directory" to "../" which is where I want it to write. This causes the rewrite. If I leave it empty, the relative paths are left alone.