LESS importing CSS and relative paths

css, less

Solution

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");

Problem

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'; ```

Original source