Skip to content

Commit ce03da9

Browse files
author
Ryan Clark
authored
docs: add example for lessOptions using a function (#326)
1 parent a6be94a commit ce03da9

File tree

1 file changed

+44
-0
lines changed

1 file changed

+44
-0
lines changed

README.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,10 @@ Type: `Object|Function`
5353

5454
You can pass any Less specific options to the `less-loader` through the `lessOptions` property in the [loader options](https://webpack.js.org/configuration/module/#rule-options-rule-query). See the [Less documentation](http://lesscss.org/usage/#command-line-usage-options) for all available options in dash-case. Since we're passing these options to Less programmatically, you need to pass them in camelCase here:
5555

56+
#### `Object`
57+
58+
Use an object to pass options through to Less.
59+
5660
**webpack.config.js**
5761

5862
```js
@@ -84,6 +88,46 @@ module.exports = {
8488
};
8589
```
8690

91+
#### `Function`
92+
93+
Allows setting the options passed through to Less based off of the loader context.
94+
95+
```js
96+
module.exports = {
97+
module: {
98+
rules: [
99+
{
100+
test: /\.less$/,
101+
use: [
102+
'style-loader',
103+
'css-loader',
104+
{
105+
loader: 'less-loader',
106+
options: {
107+
lessOptions: (loaderContext) => {
108+
// More information about available properties https://webpack.js.org/api/loaders/
109+
const { resourcePath, rootContext } = loaderContext;
110+
const relativePath = path.relative(rootContext, resourcePath);
111+
112+
if (relativePath === 'styles/foo.scss') {
113+
return {
114+
paths: ['absolute/path/c', 'absolute/path/d'],
115+
};
116+
}
117+
118+
return {
119+
paths: ['absolute/path/a', 'absolute/path/b'],
120+
};
121+
},
122+
},
123+
},
124+
],
125+
},
126+
],
127+
},
128+
};
129+
```
130+
87131
### `sourceMap`
88132

89133
Type: `Boolean`

0 commit comments

Comments
 (0)