mrcrowl / vscode-easy-less

Easy LESS extension for Visual Studio Code
MIT License
67 stars 23 forks source link

Main CSS recompiling while modifying nested file #7

Closed ThePlenkov closed 7 years ago

ThePlenkov commented 8 years ago

Dear developer,

Thanks a lot for this great extension that is saving so much time.

Could you please advise whether it's possible or not:

1) I have a project with one main style.less file that is set for autocompile 2) In fact I use it only for including all other less files 3) Now when I change any less file - I have to go to a main one and resave it for autocompilation of the new CSS 4) The problem is: Ctrl+S doesn't work when no changes have been done in this file. I have to make some dummy change to recompile it.

I guess there is a workaraound but didn't managed to find it. If it's not possible, could you please provide an opportunity to map somehow which file should be recompiled instead of current one.

As I understand there is now a main parameter, however it's for CSS file that should be overwritten. I mean a reference to another LESS file that should be recompiled again.

Thanks!

Petr.

gilm123 commented 8 years ago

if i am not wrong, i have the same problem, when having "file1.less" referencing "file2.less", and i change "file2.less", it means "file1.less" need to be auto complied also. i usually do it by change some properties in file1.less -> save -> undo -> save

mrcrowl commented 7 years ago

@ThePlenkov, sorry for the slow reply to your enquiry about how to configure easy-less for your situation.

You can use directive comments at the top of your less files to indicate what the main file should be:

style.less:

@import "abc.less";
@import "def.less";

abc.less:

// main: style.less
div.abc {
    background: aliceblue;
}

def.less:

// main: style.less
div.def {
    background: hotpink;
}

Now whenever you can save abc.less or def.less, the file to be compiled will be style.less instead.

The resulting output of style.css would then be:

div.abc {
    background: aliceblue;
}
div.def {
    background: hotpink;
}

Hope that makes sense. Let me know if you need more details.

mrcrowl commented 7 years ago

@gilios, sorry currently there is no way to automatically recompile less files when one of the dependent @import files changes.

This would be nice to have and I have found myself wanting this at times too. To achieve this would require some kind of project-wide indexing (or scan) of file dependencies, which would need to kept up to date as file changes are made. Happy to consider this if there is enough demand.