Source-map files from lessc pointing to wrong less file

Question

This is with regards to lessc I have three files:-

1. less0.less (empty)

    (empty)

2. less1.less

    @import "less0.less"

3. less2.less

    @import "less1.less"
    @var-test: .trial;
    
    @{var-test}{
          color: red;
    }

I am generating Source-map for these files by:-

lessc less2.less less2.css --source-map

The generated CSS files are being used in an html file. Source files are being used for debugging in browser. Now in browser, it shows the .trial class to be in less0.less and not less2.less So, Expected behavior is to have shown less2.less as source for .trial class and not the one being shown:- Wrong Less File being Pointed

That's the less2.css.map file
{"version":3,"sources":["less0.less","less2.less"],"names":[],"mappings":"AAAA;ECKI,wBAAA","file":"less2.css"}

Could anyone please help me out what would I have to change to get it right. Thanks in advance.

USE CASE: Say I have a file with less variables that has my UI Variables(Color,size,etc)(Say less1.less). I am importing those settings in some other file(Say less2.less). Then, after Source-mapping, when trying to check source from source in dev-tool, it takes me to less1.less and not less2.less.

Answer 1

i think you should use import syntax of less not css like this

@import "less1";