importing .less files are compiled into single .css file

Question

I am importing several .less files into styles.less file like following

@import "foo1";
@import "foo2";
@import "foo3";
@import "foo4";

Now when I compile styles.less file it merge all .less files into styles.css . This approach is good when I want to deploy it to production but I want to compile all .less files separately so that I could easily debug in my chrome dev tools in dev environment. How can I compile them in this way?

Answer 1

Compile the .less files separately. Then link all of them on the HTML page.