|
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 | +}; |
52 | 52 | ```
|
53 | 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 |
| -### 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 | +}; |
94 | 73 | ```
|
95 | 74 |
|
| 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 | + |
96 | 85 | ## Source maps
|
97 | 86 |
|
98 | 87 | 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 = {
|
125 | 114 | };
|
126 | 115 | ```
|
127 | 116 |
|
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 |
| -[](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 | +[](https://travis-ci.org/webpack/less-loader) |
| 126 | + |
| 127 | +## License |
| 128 | + |
| 129 | +MIT (http://www.opensource.org/licenses/mit-license.php) |
0 commit comments