lessio

Auto-compiles less stylesheets and auto-reloads them in the browser.

Installation

npm install -g lessio

Configuration

Go to your project directory, and execute:

lessio --generate

This will generate an example configuration file with the name lessio.json. Edit this file and change the mappings configuration so it reflects your project structure. Each mapping has a main LESS file(which can import other less files) specified with a relative path in the mapping' in directive. The out directive is a relative path the lessCss compiler uses to write the result to. This css file is included in your project's html head.

The href mapping directive is used to recognize the mapping's out CSS in the browser, when a reload is triggered. This can be the full path or a partial href, as long it uniquely marks this css-file.

Basically you don't have to change anything here, unless you need to run lessio on another port...

Once you have specified a correct mapping for your project, launch lessio in the same directory where you generated lessio.json by executing lessio without parameters. After the lessio service started, navigate your browser to localhost:8081. You should see a blank page with a Bookmarklet link. lessio works with a bookmarklet that injects the lessio client into your project's html.

Create a marklet(Chrome):

  • Right-click on The Bookmarklet link at localhost:8081
  • Select Copy Link Address
  • Right-click in the bookmarks bar, select Add Page
  • Paste the javascript in the URL field
  • Enter LessIO for the Name field

Now that you have a bookmarklet in your navigation bar, open the url to your development site, e.g. http://localhost:666 CLick on the LessIO link in the navigation-bar and start editing your LESS files, as specified in the configation mapping. Once you save a LESS file, it should trigger an autocompile/save on the out file and an autoreload on the href version in the browser. Happy styling!