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 package configuration in RequireJS:

packages: [
  {
    name: 'css',
    location: 'require-css',
    main: 'css'
  },
  {
    name: 'less',
    location: 'require-less',
    main: '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: ['css/css-builder', 'less/lessc-server', 'less/lessc'],
  include: ['css']
}

This shouldn't be necessary in future versions.

Note also that the css module itself must be included at the beginning of the layer otherwise this will result in a separate HTTP request to CSS.