* Create the resolve function used in the custom Sass importer. * Can be used by external tools to mimic how `sass-loader` works, for example * in a Jest transform. Such usages will want to wrap `resolve.create` from * [`enhanced-resolve`]https://github.com/webpack/enhanced-resolve to *
(resolverFactory)
| 484 | * @returns {Resolver} webpack resolver |
| 485 | */ |
| 486 | function getWebpackResolver(resolverFactory) { |
| 487 | // We only have one difference with the built-in sass resolution logic and out resolution logic: |
| 488 | // First, we look at the files starting with `_`, then without `_` (i.e. `_name.sass`, `_name.scss`, `_name.css`, `name.sass`, `name.scss`, `name.css`), |
| 489 | // although `sass` look together by extensions (i.e. `_name.sass`/`name.sass`/`_name.scss`/`name.scss`/`_name.css`/`name.css`). |
| 490 | // It shouldn't be a problem because `sass` throw errors: |
| 491 | // - on having `_name.sass` and `name.sass` (extension can be `sass`, `scss` or `css`) in the same directory |
| 492 | // - on having `_name.sass` and `_name.scss` in the same directory |
| 493 | // |
| 494 | // Also `sass` prefer `sass`/`scss` over `css`. |
| 495 | const webpackModuleResolve = promiseResolve( |
| 496 | resolverFactory({ |
| 497 | dependencyType: "sass", |
| 498 | conditionNames: ["sass", "style", "..."], |
| 499 | mainFields: ["sass", "style", "main", "..."], |
| 500 | mainFiles: ["_index", "index", "..."], |
| 501 | extensions: [".sass", ".scss", ".css"], |
| 502 | restrictions: [/\.((sa|sc|c)ss)$/i], |
| 503 | preferRelative: true, |
| 504 | }), |
| 505 | ); |
| 506 | const webpackImportResolve = promiseResolve( |
| 507 | resolverFactory({ |
| 508 | dependencyType: "sass", |
| 509 | conditionNames: ["sass", "style", "..."], |
| 510 | mainFields: ["sass", "style", "main", "..."], |
| 511 | mainFiles: ["_index.import", "_index", "index.import", "index", "..."], |
| 512 | extensions: [".sass", ".scss", ".css"], |
| 513 | restrictions: [/\.((sa|sc|c)ss)$/i], |
| 514 | preferRelative: true, |
| 515 | }), |
| 516 | ); |
| 517 | |
| 518 | return (context, request, fromImport) => { |
| 519 | const originalRequest = request; |
| 520 | const isFileScheme = originalRequest.slice(0, 5).toLowerCase() === "file:"; |
| 521 | |
| 522 | if (isFileScheme) { |
| 523 | try { |
| 524 | request = url.fileURLToPath(originalRequest); |
| 525 | } catch { |
| 526 | request = request.slice(7); |
| 527 | } |
| 528 | } |
| 529 | |
| 530 | /** @type {ResolutionMap} */ |
| 531 | let resolutionMap = []; |
| 532 | |
| 533 | const webpackPossibleRequests = getPossibleRequests( |
| 534 | request, |
| 535 | true, |
| 536 | fromImport, |
| 537 | ); |
| 538 | |
| 539 | resolutionMap = [ |
| 540 | ...resolutionMap, |
| 541 | { |
| 542 | resolve: fromImport ? webpackImportResolve : webpackModuleResolve, |
| 543 | context: path.dirname(context), |
searching dependent graphs…