webpack CSS变量和字符串连接

deikduxw 于 2023-04-21 发布在 Webpack

关注(0)|答案(5)|浏览(194)

我尝试使用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

有什么建议吗？

webpack

来源：https://stackoverflow.com/questions/38336341/css-variables-and-string-concatenation

5条答案

按热度按时间

mu0hgdu01#

我发现你的方法有些问题：

@font-face规则不继承:root上设置的CSS变量。
不能使用+连接CSS字符串。请参阅string concatenation in css
并非所有实现都支持url()内部的var()。

赞(0）回复(0）举报 2023-04-21

2exbekwf2#

尝试将url包含在变量中，这在后台环境中有效，但不确定是否在font-face中有效

:root { 
--url:url("https://picsum.photos/id/1/200/300"); 
}

.box { 
background:var(--url); 
}

赞(0）回复(0）举报 2023-04-21

eeq64g8w3#

这篇文章中描述了一个类似的问题：
CSS native variables not working in media queries
其中用户尝试使用@font-face规则内的变量。
正如在接受的答案（https://stackoverflow.com/a/40723269/4879632）中所描述的，你不能在规则中使用变量，因为变量是由：root（html）子元素继承的。@ Rules（字体、媒体查询等）不是元素，所以它们不是从根元素继承的。因此，你不能从根元素引用变量。

赞(0）回复(0）举报 2023-04-21

wtlkbnrh4#

你不能在CSS中连接变量（refer here）：
因为你不能在CSS中连接（除了content属性），CSS变量也不能连接。这意味着，例如，你不能将一个数字和一个单位组合在一起。

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

赞(0）回复(0）举报 2023-04-21

aij0ehis5#

你可以像这样将一个变量和一个单位组合在一起：

:root {
  --twenty: 20;
}
.box {
  width: calc( var(--twenty) * 1px );
  height: calc( var(--twenty) * 1px );
}

<div class="box" style="background:red;"></div>

赞(0）回复(0）举报 2023-04-21

我来回答

webpack CSS变量和字符串连接

5条答案

相关问题

热门标签

最新问答