Configuring css-loader with publicPath

Question

I have a .scss file with a class:

.my-class {
  background-image: url("/images/image.svg")
}

When building with webpack i'm using a publicPath in my configuration. Let's say my public path is XYZ

i'd like to find a way to find the generated css to look like:

.my-class {
  background-image: url("/XYZ/images/image.svg")
}

All the other assets generated seem to honor that publicPath variable so it's unclear what i've misconfigured. My config looks like this:

 {
        test: /^((?!\.global).)*\.scss$/,
        use: [
          { loader: require.resolve('style-loader') },
          {
            loader: require.resolve('css-loader'),
            options: {
              modules: true,
              importLoaders: 1,
              camelCase: true,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }
          },
          {
            loader: require.resolve('sass-loader')
          }
        ]
      },

Answer 1

So the easiest thing I've seen to fix this is to update your css-loader options to url: false.

This previously worked out of the box for me with [email protected] but looks like you now need this option.

My webpack now looks like this:

...
  module: {
    rules: [
      ...
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: {
                localIdentName: '[name]__[local]__[hash:base64:5]',
              },
              url: false, //<------------ this guy helped
            },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
      ...
    ],
  },
...