LESS importing CSS and relative paths

Question

I am using LESS to organize and import all my CSS files. I am also using Twitter Bootstrap which I integrated inside my style.less. It works fine like below however when I use lessc to minify the less file and compress it to one all hell breaks loose with my twitter bootstrap css. The reason is that my bootstrap.min.css has a relative path to images as "../img" so when I minify all these files and dump my output file, it no longer finds this path.

How exactly should I fix this, I don't want to be hardcoding absolute urls in my css?

style.less
    @import './folder_one/file_one';
    @import './folder_one/file_two';
    @import './folder_two/file_one';
    @import './folder_three/file_one';
    // this bootstrap css references images relatively ../img/
    @import './bootstrap/bootstrap.min.css';

Puton

I recommand you to use .htaccess for that. – Ranunculaceous

Answer 1

When running lessc use the --relative-urls flag.

lessc --relative-urls

It's poorly documented, but by default it is false which means that all @imported files will maintain their urls (e.g. background-image, font-face, etc) as they are. This is because less was already doing this and many users expect it to leave their urls alone.

When the relative-urls flag is used, lessc rewrites all of the urls according to the location of the less/css file being imported.

Example

/dir1/style/main.less

// if you don't include (less) lessc will leave bootstrap
//   as an @import at the top of the lessified css file
@import (less) '../bootstrap/bootstrap.min.css';

/dir1/lib/bootstrap/bootstrap.min.css

background-image:url("../img/bs-img.gif");

Result:

/dir1/style/main.css

background-image:url("../bootstrap/img/bs-img.gif");

Ashurbanipal

Answer 2

Check out the docs for command line usage. https://github.com/cloudhead/less.js/wiki/Command-Line-Usage. There's an option called --root-path that will prepend existing urls so that they will work in the output css file.

lessc [option option=parameter ...] <source> [destination]

lessc -rp=will/be/prepended sourcefile.less path/to/destination

---

For example:

Here is the original url, with the file in css/src/nest

background-image: url('../../../imgs/bg.png');

And this is what I would do on the command line. Note that the -rp argument should point from the output directory to the original file location

lessc -rp=src/nest css/src/nest/nesty.less css/nesty.less

And the output, with the file in css/

  background-image:url('src/nest/../../../imgs/bg.png')

---

There is a --relative-urls option, but I can't get it to work. I'm working build script that uses the workaround I described above. Build-o-Matic

This is how I handled determining the path [link]

Kerry

Try using relative paths, add flag -ru or --relative-urls, it worked in my case (using lessc 1.4.0). – Wiper

Right. I mentioned that. The whole reason for this workaround is that the -ru option wasn't working – Kerry

Answer 3

i just had this problem and solved it. the solution is to prepend ../ to the path of the style sheet that you want to import until it finds it. look here :

then i added ../ multiple times until i escaped to the wanted directory and it worked

Lejeune

Answer 4

--relative-urls flag has its in-browser counterpart.

<script>
less = {
    env: "development",
    relativeUrls: true
};
</script>
<script src="less.min.js"></script>

Ridglea

Answer 5

Just got here because i also had the problem with resolving image uri's in my less file.

"--relative-urls" has pointed me in the right direction.

For anyone else who also gets here: This argument is deprecated, you can use now "--rewrite-urls" with "off", "all" or "local" - detailed description here

Gian

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Psychopathy