Skip to content

Commit 3cb1678

Browse files
docs: update (#406)
1 parent 829001b commit 3cb1678

File tree

1 file changed

+16
-6
lines changed

1 file changed

+16
-6
lines changed

README.md

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,7 @@ module.exports = {
281281
Type: `Boolean`
282282
Default: `true`
283283

284-
Enables/Disables the default Webpack importer.
284+
Enables/Disables the default `webpack` importer.
285285

286286
This can improve performance in some cases. Use it with caution because aliases and `@import` at-rules starting with `~` will not work.
287287

@@ -418,21 +418,31 @@ Usually, it's recommended to extract the style sheets into a dedicated file in p
418418

419419
### Imports
420420

421-
Starting with `less-loader` 4, you can now choose between Less' builtin resolver and webpack's resolver. By default, webpack's resolver is used.
421+
First we try to use built-in `less` resolve logic, then `webpack` resolve logic (aliases and `~`).
422422

423-
#### webpack resolver
423+
#### Webpack Resolver
424424

425-
webpack provides an [advanced mechanism to resolve files](https://webpack.js.org/configuration/resolve/). The `less-loader` applies a Less plugin that passes all queries to the webpack resolver. Thus you can import your Less modules from `node_modules`. Just prepend them with a `~` which tells webpack to look up the [`modules`](https://webpack.js.org/configuration/resolve/#resolve-modules).
425+
`webpack` provides an [advanced mechanism to resolve files](https://webpack.js.org/configuration/resolve/).
426+
`less-loader` applies a Less plugin that passes all queries to the webpack resolver if `less` could not resolve `@import`.
427+
Thus you can import your Less modules from `node_modules`.
428+
429+
```css
430+
@import "bootstrap/less/bootstrap";
431+
```
432+
433+
Using `~` is deprecated and can be removed from your code (**we recommend it**), but we still support it for historical reasons.
434+
Why you can removed it? The loader will first try to resolve `@import` as relative, if it cannot be resolved, the loader will try to resolve `@import` inside [`node_modules`](https://webpack.js.org/configuration/resolve/#resolve-modules).
435+
Just prepend them with a `~` which tells webpack to look up the [`modules`](https://webpack.js.org/configuration/resolve/#resolve-modules).
426436

427437
```css
428438
@import "~bootstrap/less/bootstrap";
429439
```
430440

431441
It's important to only prepend it with `~`, because `~/` resolves to the home-directory. webpack needs to distinguish between `bootstrap` and `~bootstrap`, because CSS and Less files have no special syntax for importing relative files. Writing `@import "file"` is the same as `@import "./file";`
432442

433-
#### Less resolver
443+
#### Less Resolver
434444

435-
If you specify the `paths` option, modules will be searched in the given `paths`. This is Less' default behavior. `paths` should be an array with absolute paths:
445+
If you specify the `paths` option, modules will be searched in the given `paths`. This is `less` default behavior. `paths` should be an array with absolute paths:
436446

437447
**webpack.config.js**
438448

0 commit comments

Comments
 (0)