[webpack] css-loader v4.2 breaks svg-mixer

[makge]

I use a postcss-move-props-to-bg-image-query plugin.
After upgrade css-loader from 3.6 to 4.2 the plugin doesn't work anymore.

css-loader v3.6: Ok!

css-loader v4.2: Fail!

[coreyworrell]

Noticing this as well.

data:image/svg+xml;base64,PHN2...dmc+#fff

[g4g1]

Same here :/

[lada]

After several hours, I've found a workaround:

1. don't use the # symbol in your css:

.img {
  background-image: url('./img.svg?fill=fff');
}

2. Include the svg-transform-loader like this:

{
  loader: 'svg-transform-loader',
  options: {
    transformQuery(query) {
      if (query.fill) {
        query.fill = `#${query.fill}`;
      }
    },
  },
},

Hope it helps.

[g4g1]

Looks like its ok in css-loader v5.0.2
webpack-contrib/css-loader#1261

[makge]

Yes, it works now with css-loader v5.0.2
Thanks g4g1!