ullmark/require-less

LESS loader plugin for RequireJS with builds, based on RequireCSS

require-less

Optimizable LESS requiring with RequireJS

Based on the require-css module, read the documentation there for usage instructions.

Basic Overview

Allows the construction of scripts that can require LESS files, using the simple RequireJS syntax:

define(['less!styles/main'], function() {
  //code that requires the stylesheet: styles/main.less
});

When run the in the browser, less is downloaded, parsed and injected. When running a build with the RequireJS optimizer, less is compiled into the build layers dynamically as css with compression support.

Installation and Setup

Download the require-less folder manually or use volo(npm install volo -g):

volo add guybedford/require-less

Volo will automatically download require-css, which is a needed dependency.

Then add the following map configuration in RequireJS:

map: {
  '*': {
    'css': 'require-css/css', // or whatever the path to require-css and require-less are
    'less': 'require-less/less'
  }
}

Builds

The RequireCSS build system is used to build LESS. The exact same options thus apply.

Pending r.js issue 289, the modules require-css/css-builder and require-less/lessc require a shallow exclude.

Thus, add the following shallow exclusions in the r.js build configuration for each module if using modules for a layered build, or at the base-level build configuration if doing a file-based build:

{
  excludeShallow: ['require-css/css-builder', 'require-less/lessc-server', 'require-less/lessc'],
  include: ['require-css/css']
}

This shouldn't be necessary in future versions.