Home  >  Article  >  Development Tools  >  Sublime Text3 configures less to save and automatically compile

Sublime Text3 configures less to save and automatically compile

藏色散人
藏色散人forward
2019-10-01 14:03:413047browse

The following column sublime tutorial will introduce to you how to configure less to save automatic compilation in Sublime Text3. I hope it will be helpful to friends in need!

Sublime Text3 configures less to save and automatically compile

In Mac OSX environment

1.Sublime Text3 needs to install less, syntax highlighting plug-in

2 .Install NodeJS, install less globally through npm in the mac terminal npm install less -gd

3.Optional: To use minification you will need a minifier. Install less-plugin-clean-css or similar.
npm install -g less-plugin-clean-css
4.Optional: To use autoprefix. Install less-plugin-autoprefix.
npm install -g less-plugin-autoprefix

At this point, you can manually compile the less file.

Manually compile lessc style.less style.css through lessc on the Mac terminal

If you need to When saving a less file in Sublime Text3, it is automatically compiled into css. The following steps are required

5. Sublime Text3 needs to install less2css and compile the less into css plug-in

Go here and follow the official , or many articles on the Internet say it is done

But when I save the less file, the error less2css error: lessc is not available is reported. Obviously, it is possible to manually use lessc directly in the terminal. What is the problem? Well,

According to the error message, lessc should not be found. Continue to check the readme document included with the less2css plug-in in sublime.

Sublime Text 2 and 3 Plugin to compile less files to css on save.
Requires lessc installed on PATH.

It may be an issue with environment variables. Generally, less2css is installed. It will automatically match

You need to do the following:

Enter which lessc in the mac terminal and find the path of lessc /Users/[username]/.nvm /versions/node/v10.10.0/bin/lessc

Modify the configuration file of less2css in Sublime Text3 less2css.sublime-settings-User

{
   "lesscCommand": "/Users/[username]/.nvm/versions/node/v10.10.0/bin/lessc"
}

At this time, you will find that less is saved in sublime Text3 file, a .css file with the same name will appear in the current folder

The above is the detailed content of Sublime Text3 configures less to save and automatically compile. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete