Skip to content

Commit 3317d08

Browse files
docschina-botdocschina-bot
committed
docs(en): fetch all
1 parent 23b7535 commit 3317d08

9 files changed

+308
-368
lines changed

‎src/content/loaders/imports-loader.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ const myLib = require(`imports-loader?type=commonjs&imports[]=single|jquery|$&im
108108
```
109109

110110
```js
111-
const myLib = require(`imports-loader?type=commonjs&imports=single|myLib|myMethod&&wrapper=window&!./example.js`);
111+
const myLib = require(`imports-loader?type=commonjs&imports=single|myLib|myMethod&wrapper=window&!./example.js`);
112112
// `|` is separator in a query string, equivalently `single|myLib|myMethod` and `angular`
113113
// Adds the following code to the example.js:
114114
//

‎src/content/loaders/less-loader.md

Lines changed: 74 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ module.exports = {
3636
rules: [
3737
{
3838
test: /\.less$/,
39-
loader: 'less-loader', // compiles Less to CSS
39+
loader: "less-loader", // compiles Less to CSS
4040
},
4141
],
4242
},
@@ -75,13 +75,13 @@ module.exports = {
7575
test: /\.less$/,
7676
use: [
7777
{
78-
loader: 'style-loader',
78+
loader: "style-loader",
7979
},
8080
{
81-
loader: 'css-loader',
81+
loader: "css-loader",
8282
},
8383
{
84-
loader: 'less-loader',
84+
loader: "less-loader",
8585
options: {
8686
lessOptions: {
8787
strictMath: true,
@@ -106,24 +106,24 @@ module.exports = {
106106
{
107107
test: /\.less$/,
108108
use: [
109-
'style-loader',
110-
'css-loader',
109+
"style-loader",
110+
"css-loader",
111111
{
112-
loader: 'less-loader',
112+
loader: "less-loader",
113113
options: {
114114
lessOptions: (loaderContext) => {
115115
// More information about available properties https://webpack.js.org/api/loaders/
116116
const { resourcePath, rootContext } = loaderContext;
117117
const relativePath = path.relative(rootContext, resourcePath);
118118

119-
if (relativePath === 'styles/foo.less') {
119+
if (relativePath === "styles/foo.less") {
120120
return {
121-
paths: ['absolute/path/c', 'absolute/path/d'],
121+
paths: ["absolute/path/c", "absolute/path/d"],
122122
};
123123
}
124124

125125
return {
126-
paths: ['absolute/path/a', 'absolute/path/b'],
126+
paths: ["absolute/path/a", "absolute/path/b"],
127127
};
128128
},
129129
},
@@ -156,10 +156,10 @@ module.exports = {
156156
{
157157
test: /\.less$/,
158158
use: [
159-
'style-loader',
160-
'css-loader',
159+
"style-loader",
160+
"css-loader",
161161
{
162-
loader: 'less-loader',
162+
loader: "less-loader",
163163
options: {
164164
additionalData: `@env: ${process.env.NODE_ENV};`,
165165
},
@@ -173,28 +173,64 @@ module.exports = {
173173

174174
#### `Function`
175175

176+
##### Sync
177+
176178
```js
177179
module.exports = {
178180
module: {
179181
rules: [
180182
{
181183
test: /\.less$/,
182184
use: [
183-
'style-loader',
184-
'css-loader',
185+
"style-loader",
186+
"css-loader",
185187
{
186-
loader: 'less-loader',
188+
loader: "less-loader",
187189
options: {
188190
additionalData: (content, loaderContext) => {
189191
// More information about available properties https://webpack.js.org/api/loaders/
190192
const { resourcePath, rootContext } = loaderContext;
191193
const relativePath = path.relative(rootContext, resourcePath);
192194

193-
if (relativePath === 'styles/foo.less') {
194-
return '@value: 100px;' + content;
195+
if (relativePath === "styles/foo.less") {
196+
return "@value: 100px;" + content;
197+
}
198+
199+
return "@value: 200px;" + content;
200+
},
201+
},
202+
},
203+
],
204+
},
205+
],
206+
},
207+
};
208+
```
209+
210+
##### Async
211+
212+
```js
213+
module.exports = {
214+
module: {
215+
rules: [
216+
{
217+
test: /\.less$/,
218+
use: [
219+
"style-loader",
220+
"css-loader",
221+
{
222+
loader: "less-loader",
223+
options: {
224+
additionalData: async (content, loaderContext) => {
225+
// More information about available properties https://webpack.js.org/api/loaders/
226+
const { resourcePath, rootContext } = loaderContext;
227+
const relativePath = path.relative(rootContext, resourcePath);
228+
229+
if (relativePath === "styles/foo.less") {
230+
return "@value: 100px;" + content;
195231
}
196232

197-
return '@value: 200px;' + content;
233+
return "@value: 200px;" + content;
198234
},
199235
},
200236
},
@@ -221,15 +257,15 @@ module.exports = {
221257
{
222258
test: /\.less$/i,
223259
use: [
224-
'style-loader',
260+
"style-loader",
225261
{
226-
loader: 'css-loader',
262+
loader: "css-loader",
227263
options: {
228264
sourceMap: true,
229265
},
230266
},
231267
{
232-
loader: 'less-loader',
268+
loader: "less-loader",
233269
options: {
234270
sourceMap: true,
235271
},
@@ -259,10 +295,10 @@ module.exports = {
259295
{
260296
test: /\.less$/i,
261297
use: [
262-
'style-loader',
263-
'css-loader',
298+
"style-loader",
299+
"css-loader",
264300
{
265-
loader: 'less-loader',
301+
loader: "less-loader",
266302
options: {
267303
webpackImporter: false,
268304
},
@@ -290,13 +326,13 @@ module.exports = {
290326
test: /\.less$/,
291327
use: [
292328
{
293-
loader: 'style-loader', // creates style nodes from JS strings
329+
loader: "style-loader", // creates style nodes from JS strings
294330
},
295331
{
296-
loader: 'css-loader', // translates CSS into CommonJS
332+
loader: "css-loader", // translates CSS into CommonJS
297333
},
298334
{
299-
loader: 'less-loader', // compiles Less to CSS
335+
loader: "less-loader", // compiles Less to CSS
300336
},
301337
],
302338
},
@@ -315,21 +351,21 @@ To enable sourcemaps for CSS, you'll need to pass the `sourceMap` property in th
315351

316352
```javascript
317353
module.exports = {
318-
devtool: 'source-map', // any "source-map"-like devtool is possible
354+
devtool: "source-map", // any "source-map"-like devtool is possible
319355
module: {
320356
rules: [
321357
{
322358
test: /\.less$/,
323359
use: [
324-
'style-loader',
360+
"style-loader",
325361
{
326-
loader: 'css-loader',
362+
loader: "css-loader",
327363
options: {
328364
sourceMap: true,
329365
},
330366
},
331367
{
332-
loader: 'less-loader',
368+
loader: "less-loader",
333369
options: {
334370
sourceMap: true,
335371
},
@@ -356,7 +392,7 @@ Starting with `less-loader` 4, you can now choose between Less' builtin resolver
356392
webpack provides an [advanced mechanism to resolve files](/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`](/configuration/resolve/#resolvemodules).
357393

358394
```css
359-
@import '~bootstrap/less/bootstrap';
395+
@import "~bootstrap/less/bootstrap";
360396
```
361397

362398
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";`
@@ -375,16 +411,16 @@ module.exports = {
375411
test: /\.less$/,
376412
use: [
377413
{
378-
loader: 'style-loader',
414+
loader: "style-loader",
379415
},
380416
{
381-
loader: 'css-loader',
417+
loader: "css-loader",
382418
},
383419
{
384-
loader: 'less-loader',
420+
loader: "less-loader",
385421
options: {
386422
lessOptions: {
387-
paths: [path.resolve(__dirname, 'node_modules')],
423+
paths: [path.resolve(__dirname, "node_modules")],
388424
},
389425
},
390426
},
@@ -424,7 +460,7 @@ module.exports = {
424460
```js
425461
module.exports = {
426462
install: function (less, pluginManager, functions) {
427-
functions.add('pi', function () {
463+
functions.add("pi", function () {
428464
// Loader context is available in `less.webpackLoaderContext`
429465

430466
return Math.PI;

0 commit comments

Comments
 (0)