less loader module for webpack
var css = require"!raw!less!./file.less";// => returns compiled css code from file.less, resolves importsvar css = require"!css!less!./file.less";// => 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:
moduleexports =module:loaders:test: /\.less$/loader: "style-loader!css-loader!less-loader";
Then you only need to write:
You can pass LESS specific configuration options through to the render function via loader parameters.
Acceptable config options that can be appended to the loader as parameters are:
paths, optimization, filename, strictImports, syncImport, dumpLineNumbers, relativeUrls, rootpath, compress, cleancss, cleancssOptions, ieCompat, strictMath, strictUnits, urlArgs, sourceMap, sourceMapFilename, sourceMapURL, sourceMapBasepath, sourceMapRootpath, outputSourceFiles'
moduleexports =module:loaders:test: /\.less$/loader: "style-loader!css-loader!less-loader?strictMath&cleancss";
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
bower_components. Just prepend them with a
~ which tells webpack to look-up the
It's important to only prepend it with
~/ resolves to the home-directory. webpack needs to distinguish
~bootstrap because css- and less-files have no special syntax for importing relative files:
is the same as
Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling
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