Skip to content

Provide support for lesscss plugins #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 22, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,26 @@ module.exports = {

See the [LESS documentation](http://lesscss.org/usage/#command-line-usage-options) for all available options. LESS translates dash-case to camelCase.

### LESS plugins

In order to use [plugins](http://lesscss.org/usage/#plugins), simply define
the `lessLoader.lessPlugins` option. You can also change the options key
with a query parameter: `"style!css!less?config=lessLoaderCustom"`.

``` javascript
var LessPluginCleanCSS = require('less-plugin-clean-css');

module.exports = {
module: {
loaders: [...]
},
lessLoader:
lessPlugins: [
new LessPluginCleanCSS({advanced: true})
]
};
```

## Note on imports

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)
Expand Down
6 changes: 6 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ module.exports = function(source) {
var cb = this.async();
var isSync = typeof cb !== "function";
var finalCb = cb || this.callback;
var configKey = query.config || 'lessLoader';
var config = {
filename: this.resource,
paths: [],
Expand All @@ -44,6 +45,11 @@ module.exports = function(source) {
config.plugins = config.plugins || [];
config.plugins.push(webpackPlugin);

// If present, add custom LESS plugins.
if (this.options[configKey]) {
config.plugins = config.plugins.concat(this.options[configKey].lessPlugins || []);
}

// not using the `this.sourceMap` flag because css source maps are different
// @see https://github.com/webpack/css-loader/pull/40
if (query.sourceMap) {
Expand Down
12 changes: 12 additions & 0 deletions test/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,15 @@ describe("less-loader", function() {
query: "?sourceMap",
devtool: "source-map"
});
test("should install plugins", "url-path", {
query: "?config=lessLoaderTest",
lessPlugins: [
{ wasCalled: false, install: function() {this.wasCalled = true;} }
],
after: function(testVariables) {
this.lessPlugins[0].wasCalled.should.be.true;
}
});
it("should report error correctly", function(done) {
webpack({
entry: path.resolve(__dirname, "../index.js") + "!" +
Expand Down Expand Up @@ -109,6 +118,9 @@ function test(name, id, testOptions) {
path: __dirname + "/output",
filename: "bundle.js",
libraryTarget: "commonjs2"
},
lessLoaderTest: {
lessPlugins: testOptions.lessPlugins || []
}
}, function onCompilationFinished(err, stats) {
var actualMap;
Expand Down