21

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';
user391986
  • 29,536
  • 39
  • 126
  • 205

5 Answers5

16

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");
David Kirkland
  • 2,431
  • 28
  • 28
Planky
  • 3,185
  • 3
  • 29
  • 39
3

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]

posit labs
  • 8,951
  • 4
  • 36
  • 66
  • 2
    Try using relative paths, add flag -ru or --relative-urls, it worked in my case (using lessc 1.4.0). – user1 Apr 09 '13 at 06:55
  • Right. I mentioned that. The whole reason for this workaround is that the -ru option wasn't working – posit labs Apr 10 '13 at 17:06
1

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 :

enter image description here

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

enter image description here

Safi Habhab
  • 981
  • 10
  • 17
0

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

<script>
less = {
    env: "development",
    relativeUrls: true
};
</script>
<script src="less.min.js"></script>
sanmai
  • 29,083
  • 12
  • 64
  • 76
0

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

Scorpoon
  • 1
  • 1
  • 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](/help/how-to-answer). – Community Sep 01 '23 at 06:42