Registry / devops / resolve-url-loader

resolve-url-loader

JSON →
library5.0.0jsnpmunverified

Webpack loader that rewrites relative paths in url() statements based on the original source file. v5.0.0 (stable) requires node>=12, webpack>=4, and uses postcss@8. Removed the deprecated rework engine entirely. Key differentiator: it fixes the mismatch between Sass partial location and CSS output location for feature-based project structures, enabling co-located assets with partials. Actively maintained with automated tests. Alternatives like css-loader's url handling or other loaders are less targeted.

npm install resolve-url-loader
INSTALL
IMPORT
SIG · RESOLVE-URL-LOADER
R
resolve-url-loader
devopsjavascriptv5.0.0
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

resolve-url-loader
import resolveUrlLoader from 'resolve-url-loader'
const resolveUrlLoader = require('resolve-url-loader')
CommonJS require works too (package supports both).
default import
import resolveUrlLoader from 'resolve-url-loader'
const { default: resolveUrlLoader } = require('resolve-url-loader')
Default import is the loader itself; named exports don't exist.
webpack config
module.exports = { module: { rules: [{ test: /\.scss$/, use: ['style-loader','css-loader','resolve-url-loader','sass-loader'] }] } }
module.exports = { module: { loaders: [{ test: /\.scss$/, loader: 'style-loader!css-loader!resolve-url-loader!sass-loader' }] } }
Use `use` array with full loader names; avoid legacy `loaders` syntax and exclamation marks.

Shows a typical webpack configuration using resolve-url-loader between sass-loader and css-loader with source maps enabled.

// webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.scss$/, use: [ 'style-loader', 'css-loader', { loader: 'resolve-url-loader', options: { sourceMap: true, // required for preceding loaders engine: 'postcss', // default since v5 root: '' // optional, for absolute paths } }, { loader: 'sass-loader', options: { sourceMap: true } } ] } ] }, devtool: 'source-map' }; // src/index.scss @import 'features/foo'; // src/features/_foo.scss .foo { background: url(bar.png); } // src/features/bar.png exists // Without resolve-url-loader, css-loader would look for src/bar.png (wrong) // With resolve-url-loader, url(bar.png) becomes url(features/bar.png) (correct)
Debug
Known issues
breakingVersion 5 removed the 'rework' engine (deprecated in v4). Engine option only accepts 'postcss' now.
fix
Remove engine option or set to 'postcss'.
affects: >=5.0.0
breakingVersion 5 requires node>=12 and webpack>=4.
fix
Update node and webpack to meet requirements.
affects: >=5.0.0
deprecatedOption 'engine' is deprecated in v4 but still usable with 'rework'. In v5 it was removed.
fix
Migrate to postcss engine by setting engine: 'postcss'.
affects: >=4.0.0 <5.0.0
gotchaSource maps are required for loaders preceding resolve-url-loader, regardless of devtool setting.
fix
Enable sourceMap option on sass-loader and css-loader.
affects: >=3.0.0
gotchaOn Windows, absolute paths in url() may fail. Set root: '' option to fix them before css-loader.
fix
Set root: '' in resolve-url-loader options.
affects: >=3.0.0
breakingVersion 4 changed the meaning of the 'root' option. Previously it limited file search; now it is the base path for absolute URIs.
fix
Update your configuration: if you used root for file search, remove it; if you need base path for absolute URIs, set root accordingly.
affects: >=4.0.0
Errors
Common errors & fixes
Module build failed (from ./node_modules/resolve-url-loader/index.js): Error: resolve-url-loader: Cannot resolve original source file
Source maps are missing or incorrect from preceding loaders (e.g., sass-loader without sourceMap: true).
fix
Enable sourceMap: true on sass-loader and css-loader.
Error: resolve-url-loader: engine option is deprecated. Use postcss parser instead.
Using engine: 'rework' in version 4 or 5.
fix
Remove the engine option (default is postcss in v5) or set engine: 'postcss'.
Module build failed (from ./node_modules/resolve-url-loader/index.js): Error: resolve-url-loader: Cannot find module 'rework'
Using engine: 'rework' in version 5 where rework dependency was removed.
fix
Remove engine option or set to 'postcss'.
Error: resolve-url-loader: root option must be a string
Passing a non-string value (e.g., boolean or number) to root option.
fix
Set root to a string (e.g., '' for empty) or remove the option.
Upgrade
Version history
5.0.0latest on npm
Audit
Dependencies
postcssrequiredParsing CSS to find url() statements
source-maprequiredResolving original source positions from source maps
Agent activity
19 hits · last 30 days
node
18
Bingbot
1
Resources
resolve-url-loader — npm install resolve-url-loader · libregistry