less loader for webpack
Installation
npm install less-loader --save-dev
Usage
var css = ;// => returns compiled css code from file.less, resolves importsvar css = ;// => returns compiled css code from file.less, resolves imports and url(...)s
Use in tandem with the style-loader
to add the css rules to your document:
;
webpack config
moduleexports =module:loaders:test: /\.less$/loader: "style!css!less";
Then you only need to write: require("./file.less")
LESS options
You can pass any LESS specific configuration options through to the render function via query parameters.
moduleexports =module:loaders:test: /\.less$/loader: "style!css!less?strictMath&noIeCompat";
See the LESS documentation for all available options. LESS translates dash-case to camelCase. Certain options which take values (e.g. lessc --modify-var="a=b"
) are better handled with the JSON loader syntax (style!css!less?{"modifyVars":{"a":"b"}}
).
LESS plugins
In order to use plugins, simply set
the lessLoader.lessPlugins
-option on your webpack options. You can also change the options' key with a query parameter: "less?config=lessLoaderCustom"
.
var LessPluginCleanCSS = ;moduleexports =...lessLoader:lessPlugins:advanced: true;
Imports
webpack provides an advanced mechanism to resolve files. 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
;
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";
Source maps
Because of browser limitations, source maps are only available in conjunction with the 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).
Then your webpack.config.js
should look like this:
var ExtractTextPlugin = ; moduleexports = ... // must be 'source-map' or 'inline-source-map' devtool: 'source-map' module: loaders: test: /\.less$/ loader: ExtractTextPlugin plugins: // extract inline css into separate 'styles.css' 'styles.css' ;
If you want to view the original LESS files inside Chrome and even edit it, there's a good blog post. Checkout test/sourceMap for a running example. Make sure to serve the content with an HTTP server.
Contribution
Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling npm test
.
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.
License
MIT (http://www.opensource.org/licenses/mit-license.php)