Search code examples
csswebpacksasswebpack-4css-variables

How to use CSS variable in `background-image` in Webpack?

I want to use this code in my SCSS file:

.x {
  --image: '/path/img.svg';
  background-image: url(var(--image));
}

But compilation fails with this error:

ModuleNotFoundError: Module not found: Error: Can't resolve './--image'

Is there some trick to escape module resolving here?

Loaders in my Webpack config:

{
  test: /\.(png|jpg|gif|svg)$/,
  loader: 'file-loader',
  options: {
    name: '[name].[ext]',
  },
}, 
{
  test: /\.scss$/,
  use: [
    'style-loader',
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {sourceMap: true},
    }, {
      loader: 'postcss-loader',
      options: {sourceMap: true, config: {path: `./postcss.config.js`}},
    }, {
      loader: 'sass-loader',
      options: {sourceMap: true},
    },
  ],
}
Solution

  • It works for me:

    .x {
  --image: url(/path/img.svg);
  background-image: var(--image);
}