{
"manifest": {
"name": "resolve-url-loader",
"version": "4.0.0",
"description": "Webpack loader that resolves relative paths in url() statements based on the original source file",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/bholloway/resolve-url-loader.git",
"directory": "packages/resolve-url-loader"
},
"keywords": [
"webpack",
"loader",
"css",
"normalize",
"rewrite",
"resolve",
"url",
"sass",
"relative",
"file"
],
"author": {
"name": "bholloway"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/bholloway/resolve-url-loader/issues"
},
"homepage": "https://github.com/bholloway/resolve-url-loader/tree/v4-maintenance/packages/resolve-url-loader",
"engines": {
"node": ">=8.9"
},
"files": [
"index.js",
"lib/**/+([a-z-]).js",
"docs/**/*.*"
],
"dependencies": {
"adjust-sourcemap-loader": "^4.0.0",
"convert-source-map": "^1.7.0",
"loader-utils": "^2.0.0",
"postcss": "^7.0.35",
"source-map": "0.6.1"
},
"peerDependencies": {
"rework": "1.0.1",
"rework-visit": "1.0.0"
},
"peerDependenciesMeta": {
"rework": {
"optional": true
},
"rework-visit": {
"optional": true
}
},
"_registry": "npm",
"_loc": "/homez.1033/heliovt/.cache/yarn/v6/npm-resolve-url-loader-4.0.0-d50d4ddc746bb10468443167acf800dcd6c3ad57-integrity/node_modules/resolve-url-loader/package.json",
"readmeFilename": "README.md",
"readme": "# Resolve URL Loader\n\n[](https://www.npmjs.com/package/resolve-url-loader)\n\nThis **webpack loader** allows you to have a distributed set SCSS files and assets co-located with those SCSS files.\n\n## Do you organise your SCSS and assets by feature?\n\nWhere are your assets?\n\n* ✅ I want my assets all over the place, next to my SCSS files.\n* ❌ My assets are in a single directory.\n\nHow complicated is your SASS?\n\n* ✅ I have a deep SASS composition with partials importing other partials.\n* ✅ My asset paths are constructed by functions or `@mixin`s.\n* ❌ I have a single SCSS file. The asset paths are just explicit in that.\n\nWhat asset paths are you using?\n\n* ✅ Fully relative `url(./foo.png)` or `url(foo.png)`\n* ❌ Root relative `url(/foo.png)`\n* ❌ Relative to some package or webpack root `url(~stuff/foo.png`)\n* ❌ Relative to some variable which is your single asset directory `url($variable/foo.png)`\n\nWhat webpack errors are you getting?\n\n* ✅ Webpack can't find the relative asset `foo.png` 😞\n* ❌ Webpack says it doesn't have a loader for `fully/resolved/path/foo.png` 😕\n\nIf you can tick at least 1 item in **all of these questions** then use this loader. It will allow webpack to find assets with **fully relative paths**.\n\nIf for any question you can't tick _any_ items then webpack should be able to already find your assets. You don't need this loader. 🤷\n\nOnce webpack resolves your assets (even if it complains about loading them) then this loading is working correctly. 👍\n\n## What's the problem with SASS?\n\nWhen you use **fully relative paths** in `url()` statements then Webpack expects to find those assets next to the root SCSS file, regardless of where you specify the `url()`.\n\nTo illustrate here are 3 simple examples of SASS and Webpack _without_ `resolve-url-loader`.\n\n[](docs/basic-problem.svg)\n\nThe first 2 cases are trivial and work fine. The asset is specified in the root SCSS file and Webpack finds it.\n\nBut any practical SASS composition will have nested SCSS files, as in the 3rd case. Here Webpack cannot find the asset.\n\n```\nModule not found: Can't resolve './cool.png' in '/absolute/path/.../my-project/src/styles.scss'\n```\n\nThe path we present to Webpack really needs to be `./subdir/cool.png` but we don't want to write that in our SCSS. 😒\n\nLuckily we can use `resolve-url-loader` to do the **url re-writing** and make it work. 😊🎉\n\nWith functions and mixins and multiple nesting it gets more complicated. Read more detail in [how the loader works](docs/how-it-works.md). 🤓\n\n## Getting started\n\n> **Upgrading?** the [changelog](CHANGELOG.md) shows how to migrate your webpack config.\n\n### Install\n\nvia npm\n\n```bash\nnpm install resolve-url-loader --save-dev\n```\n\nvia yarn\n\n```bash\nyarn add resolve-url-loader --dev\n```\n\n### Configure Webpack\n\nThe typical use case is `resolve-url-loader` between `sass-loader` and `css-loader`.\n\n**⚠️ IMPORTANT**\n* **source-maps required** for loaders preceding `resolve-url-loader` (regardless of `devtool`).\n* Always use **full loader package name** (don't omit `-loader`) otherwise you can get errors that are hard to debug.\n\n\n``` javascript\nrules: [\n {\n test: /\\.scss$/,\n use: [\n ...\n {\n loader: 'css-loader',\n options: {...}\n }, {\n loader: 'resolve-url-loader',\n options: {...}\n }, {\n loader: 'sass-loader',\n options: {\n sourceMap: true,\n sourceMapContents: false\n }\n }\n ]\n },\n ...\n]\n```\n\n## Options\n\nThe loader should work without options but use these as required.\n\n| option | type | default | | description |\n|-------------|----------------------------|-----------------------------------------|------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `sourceMap` | boolean | `false` | | Generate an outgoing source-map. |\n| `removeCR` | boolean | `true` Windows OS
`false` otherwise | | Convert orphan CR to whitespace.
See known issues below. |\n| `debug` | boolean | `false` | | Display debug information. |\n| `silent` | boolean | `false` | | Do **not** display warnings or deprecation messages. |\n| `root` | string | _unset_ | | Similar to the (now defunct) option in `css-loader`.
This string, possibly empty, is prepended to absolute URIs.
Absolute URIs are only processed if this option is set. |\n| `join` | function | _inbuilt_ | advanced | Custom join function.
Use custom javascript to fix asset paths on a per-case basis.
Refer to the [advanced features](docs/advanced-features.md) docs. |\n| `engine` | `'rework'`
`'postcss'` | `'postcss'` | deprecated | The css parser engine.
Using this option produces a deprecation warning. |\n\n## Limitations\n\n### Compatiblity\n\nTested `macOS` and `Windows`.\n\nAll `webpack2`-`webpack4` with contemporaneous loaders/plugins using `node 8.9`. And `webpack5` with latest loaders/plugins using `node 10.0`.\n\nRefer to `test` directory for full webpack configurations as used in automated tests.\n\nSome edge cases with `libsass` on `Windows` (see [troubleshooting](docs/troubleshooting.md) docs).\n\n### Known issues\n\nRead the [troubleshooting](docs/troubleshooting.md) docs before raising an issue.\n",
"licenseText": "The MIT License (MIT)\n\nCopyright (c) 2016 Ben Holloway\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE."
},
"artifacts": [],
"remote": {
"resolved": "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz#d50d4ddc746bb10468443167acf800dcd6c3ad57",
"type": "tarball",
"reference": "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
"hash": "d50d4ddc746bb10468443167acf800dcd6c3ad57",
"integrity": "sha512-05VEMczVREcbtT7Bz+C+96eUO5HDNvdthIiMB34t7FcF8ehcu4wC0sSgPUubs3XW2Q3CNLJk/BJrCU9wVRymiA==",
"registry": "npm",
"packageName": "resolve-url-loader",
"cacheIntegrity": "sha512-05VEMczVREcbtT7Bz+C+96eUO5HDNvdthIiMB34t7FcF8ehcu4wC0sSgPUubs3XW2Q3CNLJk/BJrCU9wVRymiA== sha1-1Q1N3HRrsQRoRDFnrPgA3NbDrVc="
},
"registry": "npm",
"hash": "d50d4ddc746bb10468443167acf800dcd6c3ad57"
}