LESS stylesheet loader plugin for RequireJS.
- Load LESS stylesheets using RequireJS.
- Inline compiled LESS stylesheets during r.js optimization (NodeJS only).
Copy the style.js script into your RequireJS baseURL. You can also install requirejs-less using bower:
$ bower install requirejs-lessLESS stylesheets should be stored in a directory named less, at a relative path of ../less to your baseURL.
A recommended directory structure is as follows:
www
|-- js
| |-- less.js
| |-- style.js
| +-- main.js
|
+-- less
+-- main.less
Load LESS stylesheets in your RequireJS modules:
define([
// Load a named LESS stylesheet.
"style!main.less"
], function() {
// Do something!
});Configure requirejs-less using the RequireJS config options:
require.config({
config: {
style: {
path: "../less/",
rootPath: "/static/less/"
}
}
})- path - The relative path to LESS stylesheets. This should be relative to
baseURL. - rootPath - The absolute URL to LESS stylesheets. This is required in order to perform and optimizing build.
The style.js loader plugin uses LESS to compile stylesheets in the browser, injecting the
compiled CSS as <style> tags in the head of your document.
When the r.js optimizer is run, LESS stylesheets loaded in your RequireJS modules are compiled and inlined into the built file, avoiding additional network requests in production.
The requirejs-less project was developed by Dave Hall. You can get the code from the requirejs-less project site.
Dave Hall is a web developer, based in Cambridge, UK. You can usually find him on the Internet in a number of different places: