search

bholloway / resolve-url-loader

Webpack loader that resolves relative paths in url() statements based on the original source file
563 stars 71 forks source link

Exclude base64 svg background #232

Open Tomjesch opened 1 year ago

Tomjesch commented 1 year ago

The loader works perfect for resolving my font font files, but is it also possible to exclude(?) base64 uri used in background: url()?

I'm trying to include svg's as background image, generated with the svg-spritemap-webpack-plugin: https://github.com/cascornelissen/svg-spritemap-webpack-plugin. Based on a folder filled with svg files, the plugin creates a map and sprite mixin which allows me to use one of the following examples:

.example {
    // Using the included sprite() mixin
    @include sprite('phone');

    // Using the SVG from the map directly
    background-image: url(map-get($sprites, 'phone'));
}

Trying to achieve the following: background: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3e%3cpath fill='%230068BD' d='M115.673 602.748L512.502 288.48l396.829 314.268c37.285 29.295 39.949 90.552 7.991 125.177s-90.552 31.96-127.838 2.663L512.505 512.2 230.197 735.915c-31.96 26.632-98.538 21.307-125.177-13.316-29.295-31.96-23.969-93.215 10.653-119.847z'/%3e%3c/svg%3e) center no-repeat;

But I keep getting the following error from my css-loader:

Warning (from ../../node_modules/css-loader/dist/cjs.js):
Warning Unable to find uri in 'background: url() center no-repeat';

Which results in: background: url()

Is it possible the resolve-url-loader transforms (or something) the generated background: url() causing css-loader to fail?

bholloway commented 1 year ago

Sorry for late reply.

Please hack some js in node_modules and add console.log() (or console.error() if logs get swallowed) and confirm exactly the code path where its failing in resolve-url-loader.

Firstly to confirm that you are getting the correct URI from upstream. But also so we can see exactly what URI its failing to match correctly.