CSS 变量和字符串连接

Question

我正在尝试使用 CSS 变量来生成动态路径。

示例：

 :root {
  --fonts-path: "/path/to/font";
}

@font-face {
  font-family: "FontName";
  src: url(var(--fonts-path) + "/FontName-Light.woff") format('woff');
  font-weight: 100;
}

html {
  font-family: 'Metric', Arial, sans-serif;
}

由于未找到模块 'var(--hpe-fonts-path' 失败，这是 webpack 日志：

 ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/theme/fonts.css
Module not found: Error: Cannot resolve module 'var(--fonts-path' in /Users/project-sample/src/theme
 @ ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/theme/fonts.css 6:83-114 6:234-265 6:403-434 6:576-607

任何指针？

原文由 Alan Souza 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不能在 CSS 中连接变量（ 请参阅此处）：

由于您不能在 CSS 中连接（除了 content 属性），因此不能连接 CSS 变量。这意味着，例如，您不能将作为数字的 CSS 变量与单位相结合。

 // No version of this will work
div {
  --height: 100;
  height: var(--height) + 'px';
}

原文由 Jadvani Chetan 发布，翻译遵循 CC BY-SA 4.0 许可协议