Big update!Introducing GitHub Bot Commands. Learn more
Socket
Log inBook a demo

resolve-url-loader

Package Overview
Dependencies
5
Maintainers
1
Versions
50
Issues
File Explorer

Advanced tools

resolve-url-loader

Webpack loader that resolves relative paths in url() statements based on the original source file

    5.0.0latest

Version published
Maintainers
1
Weekly downloads
6,015,434
decreased by-17.67%

Weekly downloads

Changelog

Source

5.0.0

Breaking changes

  • Require node>=12.
  • Support only webpack>=4.
  • Update to [email protected]^8.
  • Remove rework engine (which was deprecated in V4).

Bugfixes

  • Fix log messages not correctly normalising absolute paths to posix style on Windows platform
  • Fixes to end-to-end tests and test framework.

Readme

Source

Resolve URL Loader

NPM

This webpack loader allows you to have a distributed set SCSS files and assets co-located with those SCSS files.

Do you organise your SCSS and assets by feature?

Where are your assets?

  • ✅ I want my assets all over the place, next to my SCSS files.
  • ❌ My assets are in a single directory.

How complicated is your SASS?

  • ✅ I have a deep SASS composition with partials importing other partials.
  • ✅ My asset paths are constructed by functions or @mixins.
  • ❌ I have a single SCSS file. The asset paths are just explicit in that.

What asset paths are you using?

  • ✅ Fully relative url(./foo.png) or url(foo.png)
  • ❌ Root relative url(/foo.png)
  • ❌ Relative to some package or webpack root url(~stuff/foo.png)
  • ❌ Relative to some variable which is your single asset directory url($variable/foo.png)

What webpack errors are you getting?

  • ✅ Webpack can't find the relative asset foo.png 😞
  • ❌ Webpack says it doesn't have a loader for fully/resolved/path/foo.png 😕

If 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.

If 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. 🤷

Once webpack resolves your assets (even if it complains about loading them) then this loading is working correctly. 👍

What's the problem with SASS?

When 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().

To illustrate here are 3 simple examples of SASS and Webpack without resolve-url-loader.

the basic problem

The first 2 cases are trivial and work fine. The asset is specified in the root SCSS file and Webpack finds it.

But any practical SASS composition will have nested SCSS files, as in the 3rd case. Here Webpack cannot find the asset.

Module not found: Can't resolve './cool.png' in '/absolute/path/.../my-project/src/styles.scss'

The path we present to Webpack really needs to be ./subdir/cool.png but we don't want to write that in our SCSS. 😒

Luckily we can use resolve-url-loader to do the url re-writing and make it work. 😊🎉

With functions and mixins and multiple nesting it gets more complicated. Read more detail in how the loader works. 🤓

Getting started

Upgrading? the changelog shows how to migrate your webpack config.

Install

via npm

npm install resolve-url-loader --save-dev

via yarn

yarn add resolve-url-loader --dev

Configure Webpack

The typical use case is resolve-url-loader between sass-loader and css-loader.

⚠️ IMPORTANT

  • source-maps required for loaders preceding resolve-url-loader (regardless of devtool).
  • Always use full loader package name (don't omit -loader) otherwise you can get errors that are hard to debug.
rules: [ { test: /\.scss$/, use: [ ... { loader: 'css-loader', options: {...} }, { loader: 'resolve-url-loader', options: {...} }, { loader: 'sass-loader', options: { sourceMap: true, // <-- !!IMPORTANT!! } } ] }, ... ]

Options

The loader should work without options but use these as required.

optiontypedefaultdescription
sourceMapbooleanfalseGenerate an outgoing source-map.
removeCRbooleantrue Windows OS
false otherwise
Convert orphan CR to whitespace.
See known issues below.
debugbooleanfalseDisplay debug information.
silentbooleanfalseDo not display warnings or deprecation messages.
rootstringunsetSimilar 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.
joinfunctioninbuiltadvancedCustom join function.
Use custom javascript to fix asset paths on a per-case basis.
Refer to the advanced features docs.

Limitations

Compatibility

Tested macOS and Windows.

All [email protected]-[email protected] with contemporaneous loaders/plugins using [email protected].

Refer to test directory for full webpack configurations as used in automated tests.

Known issues

Read the troubleshooting docs before raising an issue.

Keywords

FAQs

What is resolve-url-loader?

Webpack loader that resolves relative paths in url() statements based on the original source file

Is resolve-url-loader popular?

The npm package resolve-url-loader receives a total of 4,833,520 weekly downloads. As such, resolve-url-loader popularity was classified as popular.

Is resolve-url-loader well maintained?

We found that resolve-url-loader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.It has 1 open source maintainer collaborating on the project.

Last updated on 17 Jan 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc