Preface
When developing the front-end, you often write some less or sass files, but these files need to be compiled into css files to be effective. Before, some automated construction tools were used to listen to project file changes in real time, and some configuration was required.
Idea's file watch plug-in is used here, without additional configuration, which is simple and convenient.
operate
Dependencies
Plugin location
Configure File watch
1. Create a new less file in the project
Create a new less file
2. Configure the file watch of the less file.
We can see that there is an observer at the top of the file whether to enable less file, click YES
Configure Less' File Watch
Click the insert Macro on the far right of the output path to see the predefined macro and the content it represents.
Insert into the Macro interface
Final rendering
Final configuration
You can see that less is compiled into a css file in real time
Real-time compilation of images
additional
File watch can not only observe less files, but also handle operations that monitor file changes in real time. We can configure it ourselves in the Idea configuration.
File watch location
I don't recommend using the sass compiler on the front end, because installing the sass compiler on Windows depends on a lot of things, both in C++ and python. Although it is okay to use sass on Mac or Linux, it will cause problems when using it on Windows. Less has similar functions as sass, and they will eventually be compiled into css. With such a useful tool, use less directly.
Summarize
The above is the method of IntelJ idea using FileWatch to compile less files in real time. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!