将SASS变量设置为CSS3变量会导致Bootstrap 4错误

Question

StackBlitz链接

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

这确实是bootstrap文件中SCSS变量的首次使用，因此显然对我的设置方式不满意。我做了一个非常简单的StackBlitz来重复这个问题。看看styles.scss。

本质上这就是导致此错误的原因。

styles.scss

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

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

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

关于Bootstrap为何可能对此不满意的任何想法？

Answer 1

找到答案。

由于css变量的动态特性以及sass是预处理器，因此您似乎无法在SASS函数中使用css变量。

有关更详细的说明，请参见此stack。