css - 将 SASS 变量设置为 CSS3 变量会导致 Bootstrap 4 出错

Question

StackBlitz链接

由于某些原因，在将 Bootstrap 变量设置为 CSS3 变量时，我的 Angular 6 应用程序因以下错误而中断

这确实是 Bootstrap 文件中 SCSS 变量的第一次使用，所以它显然对我的设置方式不满意。我做了一个非常简单的 StackBlitz复制问题。看看 styles.scss。

本质上这就是产生此错误的原因。

样式.scss

:root{
  --primary: #0f0;
}

$primary: var(--primary); // Broken
// $primary: #f00;  // Working

@import '../bootstrap/scss/bootstrap';

关于为什么 Bootstrap 可能对此不满意有什么想法吗？

Answer 1

找到答案。

由于 css 变量的动态特性以及 sass 是预处理器这一事实，您似乎不能在 SASS 函数中使用 css 变量。

查看此 stack以获得更详细的解释。