Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add fileExt & importOption options, ability to use global less, update less version #67

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 44 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
require-less
===========
============

Optimizable LESS requiring with RequireJS
Optimizable [LESS](http://lesscss.org) requiring with [RequireJS](http://requirejs.org).

Based on the ideas from [require-css module](https://github.com/guybedford/require-css), read the documentation there for further usage instructions.

Basic Overview
--------------

Allows the construction of scripts that can require LESS files, using the simple RequireJS syntax:
Allows the construction of scripts that can require LESS files, using the simple [AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md) syntax:

```javascript
define(['less!styles/main'], function() {
Expand All @@ -18,6 +18,8 @@ define(['less!styles/main'], function() {

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, or into a separate file with the `separateCSS` build option.

The plugin also can be used alongside with [curl](https://github.com/cujojs/curl) to load and process less files.

Normalization
---

Expand Down Expand Up @@ -50,6 +52,45 @@ map: {

Package configuration can also be used here alternatively.

Configuration
-------------

You can specify [Less options](http://lesscss.org/usage/#using-less-in-the-browser-client-side-options) using `less` key in [require configuration object](http://requirejs.org/docs/api.html#config).
For example:

```javascript
require.config({
...
less: {
globalVars: {
var1: 'value1',
var2: 'value2',
},
...
}
});
```

Besides [Less options](http://lesscss.org/usage/#using-less-in-the-browser-client-side-options) you can set the following options to customize work of the plugin:

* `fileExt`: `String` - the extension that should be added when the resource name does not have `.css` extension; default value is `.less`
* `importOption`: `String` - the [import option](http://lesscss.org/features/#import-options) that should be used to load and parse the resource; default value is `multiple`

For example, those options together allow using Less in `.css` files:

```javascript
require.config({
...
less: {
...
fileExt: '.css',
importOption: 'less'
}
});
```

See `example-2` for details.

Builds
------

Expand Down
6 changes: 6 additions & 0 deletions example-2/css/1.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@import (less) "2.css";

h1 {
color: @textcolor;
font-size: @font-size;
}
5 changes: 5 additions & 0 deletions example-2/css/2.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@font-size: 50px;

body {
background: @background;
}
35 changes: 35 additions & 0 deletions example-2/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!doctype html>
<html>
<!--script type='text/javascript' src='../lessc.js'></script-->
<script type='text/javascript' src='lib/require.js'></script>
<script>
require.config({
baseUrl: '.',
packages: [
{
name: 'less',
location: '..',
main: 'less'
}
],
less: {
globalVars: {
textcolor: '#0c0',
background: '#002'
},
fileExt: '.css',
importOption: 'less'
}
});
</script>

<script>
require(['less!css/1'], function() {
document.getElementById("header").innerHTML = "Less styles applied!";
});
</script>

<body>
<h1 id="header">test</h1>
</body>
</html>
Loading