Categories

Compile LESS Files

All of the LESS files are compiled and minified into one file. Basically it’s just a matter of combining them into one file. In this example we’re going to use Prepros. You can download it at http://alphapixels.com/prepros/.

Note: In this tutorial, we use Prepros 4.0.1. In the future, there might be a new version of Prepros. So, if you have a problem following this tutorial, you can download the old version from:
http://prepros.software.informer.com/download/ (Windows)
http://macdownload.informer.com/prepros/versions/ (Mac)
  1. Open /css/less/style.less. You’ll see code like this:
    @import "vendor/bootstrap.less";
    @import "vendor/font-awesome.less"; 
    ...

    That means we’re importing vendor/bootstrap.less, vendor/font-awesome.less, … to be compiled. Or basically we’re going to combine all of those LESS files into single CSS file.

  2. Open Prepros Options.
  3. Open JS Options and LESS Options. Uncheck Auto compile. This will prevent Prepros for compiling all of the LESS and JS files, since we only going to compile /css/less/style.less.
  4. Drag your project folder onto Prepros.
  5. Find style.less. Right click and change the out put to /css/style.css.Prepros - change output
  6. Select style.less and then click Compile button to compile. If you want to minify it, check Compress CSS. You can check Auto Compile for this file only, if you want Prepros to automatically compile it immediately after you make changes to /css/less/style.less or any LESS files that are imported to /css/less/style.less.Prepros - compile

Leave a Reply