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(...)s
Use 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-loader!css-loader!less-loader"
}
]
}
};
Then you only need to write: require("./file.less")
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";
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.