var css = require("!raw!less!./file.less"); // => returns compiled css code from file.less, resolves imports var css = require("!css!less!./file.less"); // => returns compiled css code from file.less, resolves imports and url(...)sUse in tandem with the style-loader to add the css rules to your document:
require("!style!css!less!./file.less");module.exports = { module: { loaders: [ { test: /\.less$/, loader: "style!css!less" } ] } };Then you only need to write: require("./file.less")
You can pass any LESS specific configuration options through to the render function via query parameters.
module.exports = { module: { loaders: [ { test: /\.less$/, loader: "style!css!less?strictMath&noIeCompat" } ] } };See the LESS documentation for all available options. LESS translates dash-case to camelCase.
In order to use plugins, simply define the lessLoader.lessPlugins option. You can also change the options key with a query parameter: "style!css!less?config=lessLoaderCustom".
var LessPluginCleanCSS = require('less-plugin-clean-css'); module.exports = { module: { loaders: [...] }, lessLoader: lessPlugins: [ new LessPluginCleanCSS({advanced: true}) ] };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 or bower_components. Just prepend them with a ~ which tells webpack to look-up the modulesDirectories
@import "~bootstrap/less/bootstrap";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:
@import "file";is the same as
@import "./file";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 = require('extract-text-webpack-plugin'); module.exports = { ... // must be 'source-map' or 'inline-source-map' devtool: 'source-map', module: { loaders: [ { test: /\.less$/, loader: ExtractTextPlugin.extract( // activate source maps via loader query 'css?sourceMap!' + 'less?sourceMap' ) } ] }, plugins: [ // extract inline css into separate 'styles.css' new ExtractTextPlugin('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.
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.
