如何在Webpack的`background-image`中使用CSS变量？

我想在我的SCSS文件中使用以下代码：

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

但是编译失败，并显示以下错误：

ModuleNotFoundError：找不到模块：错误：无法解析“ ./--image”

这里有一些技巧可以逃避模块解析吗？

我的Webpack配置中的加载程序：

{
  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},
    },
  ],
}