【问题标题】：Setting SASS variable to CSS3 variable causes error in Bootstrap 4将 SASS 变量设置为 CSS3 变量会导致 Bootstrap 4 中的错误
【发布时间】：2019-02-11 13:15:15
【问题描述】：

StackBlitz链接

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

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

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

styles.scss

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

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

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

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

【问题讨论】：

尝试map-get 实现这一目标
其实是css3 vars;)
你能提供一个例子吗？现在会有点乱。谢谢。
而这样做的目的是什么？既然你有一个 CSS 变量，为什么要引入一个 SCSS 变量？
尝试使用 angular fileReplacement 来根据环境动态更改主题。而 bootswatch 需要这些 SCSS 变量。看到这个stackoverflow.com/questions/52184282/…

标签： css angular sass bootstrap-4

【解决方案1】：

找到答案了。

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

请参阅此stack 以获得更详细的说明。

【讨论】：