https://github.com/etianen/requirejs-less

LESS stylesheet loader plugin for RequireJS.
https://github.com/etianen/requirejs-less

Last synced: 25 days ago
JSON representation

LESS stylesheet loader plugin for RequireJS.

• Host: GitHub
• URL: https://github.com/etianen/requirejs-less
• Owner: etianen
• License: bsd-3-clause
• Created: 2014-04-28T14:21:43.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-05-30T10:29:50.000Z (over 10 years ago)
• Last Synced: 2024-10-10T08:50:35.846Z (28 days ago)
• Language: JavaScript
• Size: 184 KB
• Stars: 2
• Watchers: 3
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# requirejs-less

LESS stylesheet loader plugin for RequireJS.

## Features

* Load LESS stylesheets using RequireJS.

* Inline compiled LESS stylesheets during r.js optimization (NodeJS only).

## Installation

Copy the `style.js` script into your RequireJS `baseURL`. You can also install requirejs-less using [bower](http://bower.io/):

``` bash

$ bower install requirejs-less

```

## Usage

LESS 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:

``` js

define([

    // Load a named LESS stylesheet.

    "style!main.less"

], function() {

    

    // Do something!

});

```

## Configuration

Configure requirejs-less using the RequireJS config options:

``` js

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.

## How it works

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.

## Support and announcements

The requirejs-less project was developed by Dave Hall. You can get the code

from the [requirejs-less project site](http://github.com/etianen/requirejs-less).

## More information

    

Dave Hall is a web developer, based in Cambridge, UK. You can usually

find him on the Internet in a number of different places:

*   [Website](http://www.etianen.com/ "Dave Hall's homepage")

*   [Twitter](http://twitter.com/etianen "Dave Hall on Twitter")

*   [Google Profile](http://www.google.com/profiles/david.etianen "Dave Hall's Google profile")