【发布时间】：2020-06-14 17:55:18
【问题描述】：
我正在尝试使用 Angular 应用程序中的 CSS 变量将 Bootstrap 4 中的默认 Primary Sass 变量覆盖为自定义颜色，如下所示：
styles.scss
:root {
--primary: #00695c;
}
$myPrimary: var(--primary);
$primary: $myPrimary; // This does not work
@import '../node_modules/bootstrap/scss/bootstrap';
编译我的应用程序时出现此错误：
Failed to compile.
./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined
^
$color: var(--primary) is not a color.
╷
181 │ $link-hover-color: darken($link-color, 15%) !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 181:43 @import
node_modules\bootstrap\scss\bootstrap.scss 9:9 @import
stdin 19:9 root stylesheet
in C:\Work\node_modules\bootstrap\scss\_variables.scss (line 181, column 43)
有没有办法解决这个问题并使用 css 变量覆盖引导 sass 变量？
还有另一个related question，但我无法解决我的问题。
更新
实际上我已经创建了一个 Angular 组件库供内部使用。我已经使用 CSS 变量在这个库中实现了主题，因此我可以动态更改它们的值并允许用户为应用程序选择主题。
所以在我的库中，我有不同的主题文件，下面是其中之一：
theme.scss
@import './library-styles-to-be-used-in-app.scss';
:root {
--primary: #00695c;
--secondary: #f4f5f6;
}
现在，我将这个主题文件导入到我的 Angular 应用 styles.scss 文件中，如下所示：
@import '../dist/library/styles/theme.scss';
@import '../node_modules/bootstrap/scss/bootstrap';
请参阅下面的图像，引导 css 变量已被覆盖，但如果我使用 btn btn-primary 之类的引导类，它仍会显示旧的蓝色。
【问题讨论】：
-
你不能这样做，因为 css 属性和 sass 变量的工作方式不同。您不能将内置的 sass 函数
darken与 css 自定义属性一起使用。它需要一个颜色值，并为您提供更深的颜色。 CSS 属性不是这样工作的，它们是动态的并且可以改变。 -
@cloned 有什么替代方案或解决方案吗？我已经在我的应用程序中实现了主题，所以我需要 css 变量。
-
@UsmanAnwar - 我的情况完全相同。你有什么解决办法吗？
-
@Nimmi 不，我必须单独覆盖所有必需的引导类。如果您能找到解决方案，请在此处分享。
-
@UsmanAnwar 感谢您的更新，会尝试，如果我能找到一些东西，那么肯定会在这里更新。
标签： html css angular twitter-bootstrap sass