npm install -g lessio
Go to your project's main directory, and execute:
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 name to distinguish between mappings in the lessio log feedback. A mapping's main LESS file(which can import other less files) is specified with a relative path in the mapping' in directive. The out directive is a relative path that the lessCss compiler uses to write the result to. This css file is eventually 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 identifies this CSS file.
Normally you don't have to change anything here, unless you want to run LessIO's watch service on another port...
When you only need to compile all mappings just once, use the compile option like:
LessIO's watch service autocompiles LESS to CSS and autoreloads the CSS in the browser. Launch LessIO's watch service in the same directory as the configuration file once you finished configuring it:
When you save a modified LESS file, specified in one of the mappings, LessIO's watch service will automatically compile/save all LESS mappings to their respective CSS counterparts.
- Right-click on The Bookmarklet link at localhost:8081
- Select Copy Link Address
- Right-click in the bookmarks bar, select Add Page
- Enter LessIO for the Name field
Now that you have a bookmarklet in the browser's navigation bar, open the URL to your development site(e.g. http://localhost:8123). CLick on the LessIO bookmarklet 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 on the out file and an autoreload on the href version in the browser.
Ps. Don't forget to update the bookmarklet when you change watch service settings!