{"library":"resolve-url-loader","title":"resolve-url-loader","description":"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.","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install resolve-url-loader"],"cli":null},"imports":["import resolveUrlLoader from 'resolve-url-loader'","import resolveUrlLoader from 'resolve-url-loader'","module.exports = { module: { rules: [{ test: /\\.scss$/, use: ['style-loader','css-loader','resolve-url-loader','sass-loader'] }] } }"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.scss$/,\n        use: [\n          'style-loader',\n          'css-loader',\n          {\n            loader: 'resolve-url-loader',\n            options: {\n              sourceMap: true, // required for preceding loaders\n              engine: 'postcss', // default since v5\n              root: '' // optional, for absolute paths\n            }\n          },\n          {\n            loader: 'sass-loader',\n            options: {\n              sourceMap: true\n            }\n          }\n        ]\n      }\n    ]\n  },\n  devtool: 'source-map'\n};\n\n// src/index.scss\n@import 'features/foo';\n\n// src/features/_foo.scss\n.foo { background: url(bar.png); }\n\n// src/features/bar.png exists\n// Without resolve-url-loader, css-loader would look for src/bar.png (wrong)\n// With resolve-url-loader, url(bar.png) becomes url(features/bar.png) (correct)","lang":"javascript","description":"Shows a typical webpack configuration using resolve-url-loader between sass-loader and css-loader with source maps enabled.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}