Less Importing CSS and Relative Paths

How can I get the right relative paths in my compiled LESS css files?

Have a look at https://github.com/marklagendijk/WinLess/issues/12
It seems to be related with exactly the version you are using (1.5.3). I recommend to update to the latest winless build which is already 1.8.0.

There have been several issues with relative paths along the way of winless. But most of them seem to be fixed. See also https://github.com/marklagendijk/WinLess/issues/search?q=path

Please note that the default behavior of the less compiler is actual to retain the relative path as you would expect.

Relative path of node_modules for LESS @import

You can achieve this by installing less-loader and add it into webpack.

How to do it:
https://www.npmjs.com/package/less-loader#webpack-resolver

Example:

@import "~font-awesome/css/font-awesome.min.css";

What should my LESS @import path be?

After tracking down exactly where the error was coming from in the django-compressor source. It turns out to be directly passed from the shell. Which clued me into removing all the variables and literally just trying to get the lessc compiler to parse the file.

Turns out it wants a relative path from the source file to the file to be imported in terms of the physical filesystem path. So I had to back all the way out to my <project_root> and then reference assets/css/lib.less from there. The actual import that finally worked was:

@import "../../../../assets/css/lib.less"

What's very odd though is that lessc would not accept an absolute filesystem path (i.e. /path/to/project/assets/css/lib.less). I'm not sure why.

UPDATE (02/08/2012)

Had a complete "DUH" moment when I finally pushed my code to my staging environment and ran collectstatic. The @import path I was using worked fine in development because that was the physical path to the file then, but once collectstatic has done it's thing, everything is moved around and relative to <project_root>/static/.

I toyed with the idea of using symbolic links to try to match up the pre and post-collectstatic @import paths, but I decided that that was far too complicated and fragile in the long run.

SO... I broke down and moved all the LESS files together under <project_root>/assets/css/, and rationalized moving the LESS files out of the apps because since they're tied to a project-level file in order to function, they're inherently project-level themselves.

Stop Bundle Transformer converting relative paths in LESS

In the BundleTransformer.Less and BundleTransformer.SassAndScss modules cannot be disable transformation of relative paths to absolute, because it can break the references to images when using @import directives.

To get /img/logo.png instead of /css/img/logo.png you just need to correctly specify a relative path in the source code (../../img/logo.png instead of ../img/logo.png).

---

Related Topics