Как использовать переменную CSS в `background-image` в Webpack?

Question

Я хочу использовать этот код в моем файле S CSS:

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

Answer 1

Почему вы заявляете, что используете такую ​​переменную, если вы не используете vanilla css? Вы можете просто сделать:

$image = '/path/img.svg';

.x { 
  background-image: url($image);
}

РЕДАКТИРОВАТЬ :

как для прямой вверх css, у вас есть синтаксическая ошибка, попробуйте это:

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

Answer 2

у меня работает:

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