如何在 Webpack 的“背景图片”中使用 CSS 变量？答案

【问题标题】：How to use CSS variable in `background-image` in Webpack?如何在 Webpack 的“背景图片”中使用 CSS 变量？
【发布时间】：2020-04-28 11:15:40
【问题描述】：

我想在我的 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},
    },
  ],
}

【问题讨论】：

标签： css webpack sass webpack-4 css-variables

【解决方案1】：

如果您不在 vanilla css 上，为什么要声明使用这样的变量？你可以这样做：

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

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

编辑：

至于直接的 css，你有一个语法错误，试试这个：

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

【讨论】：

因为--image: '/path/img.svg'规则会在HTML组件内联样式中改变。
感谢您的评论，我修正了示例中的错字。但在我的实际应用程序中，对变量的引用是正确的。
下一步：图像 URI 位于链接的 href 属性中，但我想将其用作 div 中的背景图像。似乎因为 attr() 仅适用于内容，它不能用于填充在 url() 中使用的变量。有没有办法解决这个问题？

【解决方案2】：

它对我有用：

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

【讨论】：