Use less compiler in phpstorm to convert less code to css

1. Use npm to install the less compiler, check the npm version, as shown in Figure 1
npm -v

Figure 1

2. Install the Less compiler globally, run npm in phpstorm, select file, and open settings, as shown in Figure 2

Figure 2

3. Click Node.js and npm under “Language and Framework”, and on the opened Node.js and npm page, pack The AGES area displays all Node.js related packages currently installed on your computer, both at the global and project level. Less has been installed, as shown in Figure 3

Figure 3

4. Create a file observer, select File, and open settings, as shown in Figure 2

Figure 2

5. Click “File Watcher” under the “Tools” node. The opened File Watchers page displays the list of File Watchers that have been configured in the project. as shown in Figure 4

Figure 4

6. Repeat the third step to find that the installation of less is at the project level, not global installation, as shown in Figure 5

Figure 5

7. Run the installation from the command line in global mode, type the following command at the command prompt, and use the Taobao npm image, as shown in Figure 6

cnpm install -g less

Figure 6

8. Add this folder: C:\Users\Administrator\AppData\Roaming\npm\Node_Modules\less to the PATH variable, as shown in Figure 7

Figure 7

9. Repeat the 5th step to specify the program folder: C:\Users\Administrator\AppData\Roaming\npm\lessc.cmd, as shown in Figure 8

8

10. Create a new style.less file, add some new content, and automatically compile and generate the style.css file, as shown in Figure 9

Figure 9