How to work with LESS correctly?

Question

css

The problem arose as follows. I need to use the bootstrap components, it's a dump in itself, but the individual components are a very good thing.
I went to visit the developers: https://github.com/twbs/bootstrap downloaded this whole thing and I'm interested in the following:
- dropdown.js
- modal.js
- popover.js
- tab.js
- tooltip.js
Naturally to these plugins need styles, you can get them here: https://github.com/twbs/bootstrap/tree/master/less
To compile LESS to CSS, I use a plugin in phpStorm.
And the following problem arises:
Each LESS file uses variables: https://github.com/twbs/bootstrap/blob/master/less..., therefore, when editing the code, I cannot edit 1 file and immediately look at the changes in the browser, as an error occurs (for example, the @modal-content-bg variable was not found).
As an option, create your own settings file and import it into each LESS plugin file or constantly collect the whole thing through grunt, which is rather inconvenient.
Can you please tell me how to prepare this?

Answer 1

The best option is Grunt (Gulp), Prepros, etc. Enough is not

constantly collect

, but set up a plugin grunt-contrib-watchthat collects your less files when they change. I'm not sure, but most likely PHPStorm can do this, since WebStorm has watcher settings.
A useful idea would be to create a separate file, for example styles.less, where all the necessary less-files will be imported, and when changed, it will be compiled.