微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在 LESS 函数中使用 CSS 自定义属性

如何解决在 LESS 函数中使用 CSS 自定义属性

我有以下自定义属性定义:

:root: {
  --my-color: red;
}

@primary-color: var(--my-color);

上面定义的这个 LESS 颜色是从我正在使用的组件库中使用的。覆盖该 LESS 变量是我决定要用于我的项目的颜色的方式。但是像这样定义颜色会使构建失败。

Error evaluating function `fade`: Argument cannot be evaluated to a color

以下是我正在使用的库将如何使用我要覆盖的 @primary-color

background-color: fade(@primary-color,20%); // from the source code of the library

在此 Github issue 中,我找到了以下解决方法

background-color: ~"fade(@primary-color,20%)";

要做到这一点,我必须将库的 LESS 文件修改node_modules。在我之前链接的 Github 问题中,也有人说从 LESS 3.x 开始不再需要这种解决方法,但我尝试使用 LESS 3.13.1 和 LESS 4.1.1,如果我没有添加 ~"func" webpack 构建的语法仍然失败。有人有更好的解决方案吗?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。