Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Exclude base64 svg background #232

Open
Tomjesch opened this issue Feb 22, 2023 · 1 comment
Open

Exclude base64 svg background #232

Tomjesch opened this issue Feb 22, 2023 · 1 comment

Comments

@Tomjesch
Copy link

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
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants