Posted on

Setting up Sublime Text with LESS compile on save in Windows

Setting up Sublime Text and less autocompile in Windows with the less2css plugin can be tricky because most solutions are geared to *nix. Most solutions I found for this include using a random git repo and executing code from them which I don’t trust.

Here are the steps I used:

  1. Install node using the Windows installer: https://nodejs.org/en/
  2. Open a command prompt and navigate to the folder that contains node.exe, you chose this when installing node. Mine is “C:\Program Files\nodejs\”
  3. Install less from command line by running this command:
    npm install less
  4. Install less cleanup plugin by running this command:
    npm install less-plugin-clean-css
  5. Navigate to the less bin folder in explorer, mine is: “C:\Program Files\nodejs\node_modules\less\bin\”
    1. There should be a lessc file in there, if not follow the steps above until there is one
  6. Create a new text file in the less bin folder called “lessc.cmd”
  7. Edit lessc.cmd in a text editor and enter the following line:

    @”C:\Program Files\nodejs\node.exe” “C:\Program Files\nodejs\node_modules\less\bin\lessc” %*

    1. Note: Change the paths to match your local system
  8. Add lessc to the path environment variable.
    1. My entry looks like this:
      ;C:\Program Files\nodejs\node_modules\less\bin
    2. If you have an issue with your path variable being longer than the default 1024 character limit, I recommend using SetEnv: http://www.codeproject.com/Articles/12153/SetEnv
  9. Open a new command prompt and type “lessc”, you should see the various commandline options listed along with some helpful information.
    1. If you see
      ‘lesscc’ is not recognized as an internal or external command,
      Verify each step above to make sure that they all completed successfully. Also make sure to open a NEW command prompt after setting the path variable.
  10. In Sublime Text, open the package manager with ctrl+shift+p, type install, and run Package Control: Install Package
    1. When the prompt comes up type less2css and hit enter
    2. Open a .less file for editing and hit save, it should automatically generate the .css file for you now