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 | };
|
52 | ```
|
53 |
|
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 | ## Note on imports
|
57 |
|
58 | 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)
|
59 |
|
60 | ```css
|
61 | @import "~bootstrap/less/bootstrap";
|
62 | ```
|
63 |
|
64 | 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:
|
65 |
|
66 | ```css
|
67 | @import "file";
|
68 | ```
|
69 |
|
70 | is the same as
|
71 |
|
72 | ```css
|
73 | @import "./file";
|
74 | ```
|
75 |
|
76 | ## Source maps
|
77 |
|
78 | 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).
|
79 |
|
80 | Then your `webpack.config.js` should look like this:
|
81 |
|
82 | ```javascript
|
83 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
84 |
|
85 | module.exports = {
|
86 | ...
|
87 | // must be 'source-map' or 'inline-source-map'
|
88 | devtool: 'source-map',
|
89 | module: {
|
90 | loaders: [
|
91 | {
|
92 | test: /\.less$/,
|
93 | loader: ExtractTextPlugin.extract(
|
94 | // activate source maps via loader query
|
95 | 'css?sourceMap!' +
|
96 | 'less?sourceMap'
|
97 | )
|
98 | }
|
99 | ]
|
100 | },
|
101 | plugins: [
|
102 | // extract inline css into separate 'styles.css'
|
103 | new ExtractTextPlugin('styles.css')
|
104 | ]
|
105 | };
|
106 | ```
|
107 |
|
108 | 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.
|
109 |
|
110 | ## Contribution
|
111 |
|
112 | Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling `npm test`.
|
113 |
|
114 | 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.
|
115 |
|
116 | [![build status](https://travis-ci.org/webpack/less-loader.svg)](https://travis-ci.org/webpack/less-loader)
|
117 |
|
118 | ## License
|
119 |
|
120 | MIT (http://www.opensource.org/licenses/mit-license.php)
|