Skip to content

Commit 9267cb1

Browse files
committed
Improve README
1 parent 41f9b68 commit 9267cb1

File tree

1 file changed

+93
-104
lines changed

1 file changed

+93
-104
lines changed

README.md

Lines changed: 93 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,87 @@
1-
# less loader for webpack
2-
3-
## Usage
4-
5-
[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
6-
7-
``` javascript
8-
var css = require("!raw!less!./file.less");
9-
// => returns compiled css code from file.less, resolves imports
10-
var css = require("!css!less!./file.less");
11-
// => returns compiled css code from file.less, resolves imports and url(...)s
12-
```
13-
14-
Use in tandem with the [`style-loader`](https://github.com/webpack/style-loader) to add the css rules to your document:
15-
16-
``` javascript
17-
require("!style!css!less!./file.less");
18-
```
19-
20-
### webpack config
21-
22-
``` javascript
23-
module.exports = {
24-
module: {
25-
loaders: [
26-
{
27-
test: /\.less$/,
28-
loader: "style!css!less"
29-
}
30-
]
31-
}
32-
};
33-
```
34-
35-
Then you only need to write: `require("./file.less")`
36-
37-
### LESS options
38-
39-
You can pass any LESS specific configuration options through to the render function via [query parameters](http://webpack.github.io/docs/using-loaders.html#query-parameters).
40-
41-
``` javascript
42-
module.exports = {
43-
module: {
44-
loaders: [
45-
{
46-
test: /\.less$/,
47-
loader: "style!css!less?strictMath&noIeCompat"
48-
}
49-
]
50-
}
51-
};
1+
# less loader for webpack
2+
3+
## Usage
4+
5+
[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
6+
7+
``` javascript
8+
var css = require("!raw!less!./file.less");
9+
// => returns compiled css code from file.less, resolves imports
10+
var css = require("!css!less!./file.less");
11+
// => returns compiled css code from file.less, resolves imports and url(...)s
12+
```
13+
14+
Use in tandem with the [`style-loader`](https://github.com/webpack/style-loader) to add the css rules to your document:
15+
16+
``` javascript
17+
require("!style!css!less!./file.less");
18+
```
19+
20+
### webpack config
21+
22+
``` javascript
23+
module.exports = {
24+
module: {
25+
loaders: [
26+
{
27+
test: /\.less$/,
28+
loader: "style!css!less"
29+
}
30+
]
31+
}
32+
};
33+
```
34+
35+
Then you only need to write: `require("./file.less")`
36+
37+
### LESS options
38+
39+
You can pass any LESS specific configuration options through to the render function via [query parameters](http://webpack.github.io/docs/using-loaders.html#query-parameters).
40+
41+
``` javascript
42+
module.exports = {
43+
module: {
44+
loaders: [
45+
{
46+
test: /\.less$/,
47+
loader: "style!css!less?strictMath&noIeCompat"
48+
}
49+
]
50+
}
51+
};
5252
```
5353

54-
See the [LESS documentation](http://lesscss.org/usage/#command-line-usage-options) for all available options. LESS translates dash-case to camelCase.
55-
56-
### LESS plugins
57-
58-
In order to use [plugins](http://lesscss.org/usage/#plugins), simply define
59-
the `lessLoader.lessPlugins` option. You can also change the options key
60-
with a query parameter: `"style!css!less?config=lessLoaderCustom"`.
61-
62-
``` javascript
63-
var LessPluginCleanCSS = require('less-plugin-clean-css');
64-
65-
module.exports = {
66-
module: {
67-
loaders: [...]
68-
},
69-
lessLoader:
70-
lessPlugins: [
71-
new LessPluginCleanCSS({advanced: true})
72-
]
73-
};
74-
```
75-
76-
## Note on imports
77-
78-
webpack provides an [advanced mechanism to resolve files](http://webpack.github.io/docs/resolving.html). The less-loader stubs less' `fileLoader` and passes all queries to the webpack resolving engine. Thus you can import your less-modules from `node_modules` or `bower_components`. Just prepend them with a `~` which tells webpack to look-up the [`modulesDirectories`](http://webpack.github.io/docs/configuration.html#resolve-modulesdirectories)
79-
80-
```css
81-
@import "~bootstrap/less/bootstrap";
82-
```
83-
84-
It's important to only prepend it with `~`, because `~/` resolves to the home-directory. webpack needs to distinguish `bootstrap` from `~bootstrap` because css- and less-files have no special syntax for importing relative files:
85-
86-
```css
87-
@import "file";
88-
```
89-
90-
is the same as
91-
92-
```css
93-
@import "./file";
54+
See the [LESS documentation](http://lesscss.org/usage/#command-line-usage-options) for all available options. LESS translates dash-case to camelCase.
55+
56+
### LESS plugins
57+
58+
In order to use [plugins](http://lesscss.org/usage/#plugins), simply define
59+
the `lessLoader.lessPlugins` option. You can also change the options key
60+
with a query parameter: `"less?config=lessLoaderCustom"`.
61+
62+
``` javascript
63+
var LessPluginCleanCSS = require('less-plugin-clean-css');
64+
65+
module.exports = {
66+
...
67+
lessLoader: {
68+
lessPlugins: [
69+
new LessPluginCleanCSS({advanced: true})
70+
]
71+
}
72+
};
9473
```
9574

75+
## Imports
76+
77+
webpack provides an [advanced mechanism to resolve files](http://webpack.github.io/docs/resolving.html). The less-loader stubs less' `fileLoader` and passes all queries to the webpack resolving engine. Thus you can import your less-modules from `node_modules`. Just prepend them with a `~` which tells webpack to look-up the [`modulesDirectories`](http://webpack.github.io/docs/configuration.html#resolve-modulesdirectories)
78+
79+
```css
80+
@import "~bootstrap/less/bootstrap";
81+
```
82+
83+
It's important to only prepend it with `~`, because `~/` resolves to the home-directory. webpack needs to distinguish between `bootstrap` and `~bootstrap` because css- and less-files have no special syntax for importing relative files. Writing `@import "file"` is the same as `@import "./file";`
84+
9685
## Source maps
9786

9887
Because of browser limitations, source maps are only available in conjunction with the [extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin). Use that plugin to extract the CSS code from the generated JS bundle into a separate file (which even improves the perceived performance because JS and CSS are loaded in parallel).
@@ -125,16 +114,16 @@ module.exports = {
125114
};
126115
```
127116

128-
If you want to view the original LESS files inside Chrome and even edit it, [there's a good blog post](https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0). Checkout [test/sourceMap](https://github.com/webpack/less-loader/tree/master/test) for a running example. Make sure to serve the content with an HTTP server.
129-
130-
## Contribution
131-
132-
Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling `npm test`.
133-
134-
The tests are basically just comparing the generated css with a reference css-file located under `test/css`. You can easily generate a reference css-file by calling `node test/helpers/generateCss.js <less-file-without-less-extension>`. It passes the less-file to less and writes the output to the `test/css`-folder.
135-
136-
[![build status](https://travis-ci.org/webpack/less-loader.svg)](https://travis-ci.org/webpack/less-loader)
137-
138-
## License
139-
140-
MIT (http://www.opensource.org/licenses/mit-license.php)
117+
If you want to view the original LESS files inside Chrome and even edit it, [there's a good blog post](https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0). Checkout [test/sourceMap](https://github.com/webpack/less-loader/tree/master/test) for a running example. Make sure to serve the content with an HTTP server.
118+
119+
## Contribution
120+
121+
Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling `npm test`.
122+
123+
The tests are basically just comparing the generated css with a reference css-file located under `test/css`. You can easily generate a reference css-file by calling `node test/helpers/generateCss.js <less-file-without-less-extension>`. It passes the less-file to less and writes the output to the `test/css`-folder.
124+
125+
[![build status](https://travis-ci.org/webpack/less-loader.svg)](https://travis-ci.org/webpack/less-loader)
126+
127+
## License
128+
129+
MIT (http://www.opensource.org/licenses/mit-license.php)

0 commit comments

Comments
 (0)