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

Question

我想在我的 SCSS 文件中使用这段代码：

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

但编译失败并出现此错误：

ModuleNotFoundError: Module not found: Error: Can't resolve './--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

如果您不使用原版 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);
}

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

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

css

sass

css-variables

webpack

webpack-4