You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+16-6Lines changed: 16 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -281,7 +281,7 @@ module.exports = {
281
281
Type: `Boolean`
282
282
Default: `true`
283
283
284
-
Enables/Disables the default Webpack importer.
284
+
Enables/Disables the default `webpack` importer.
285
285
286
286
This can improve performance in some cases. Use it with caution because aliases and `@import` at-rules starting with `~` will not work.
287
287
@@ -418,21 +418,31 @@ Usually, it's recommended to extract the style sheets into a dedicated file in p
418
418
419
419
### Imports
420
420
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 `~`).
422
422
423
-
#### webpack resolver
423
+
#### Webpack Resolver
424
424
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).
426
436
427
437
```css
428
438
@import"~bootstrap/less/bootstrap";
429
439
```
430
440
431
441
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";`
432
442
433
-
#### Less resolver
443
+
#### Less Resolver
434
444
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:
0 commit comments