我正在尝试使用 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 变量覆盖 bootstrap sass 变量?
还有一个related question ,但我无法用它解决我的问题。
更新
实际上我已经创建了一个供内部使用的 Angular 组件库。我已经使用 CSS 变量在此库中实现了主题,因此我可以动态更改它们的值并允许用户为应用程序选择主题。
所以在我的库中我有不同的主题文件,以下是其中之一:
主题.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';
请参阅下面的图像, Bootstrap css 变量已被覆盖,但如果我使用像 btn btn-primary
这样的 Bootstrap 类,它仍然显示旧的蓝色。
最佳答案
这是不可能的,因为 CSS 自定义属性和 SASS 变量是两个独立的东西。
CSS 自定义属性可以在运行时通过 Javascript 进行更改。
另一方面,SASS 变量是静态的,它们将被生成,然后是 .css
文件中的硬编码值。例如,SASS 的 darken()
功能获取输入字符串(例如十六进制值)并输出该十六进制值的深色版本。
但是 bootstrap 已经使用了 CSS 自定义属性,所以也许您只是以错误的方式使用它们。也许如果您扩展您想要实现的目标,也许我们可以更好地帮助您。
目前我们能给您的唯一答案是:这是不可能的。
关于html - 用 CSS 变量覆盖 Bootstrap 4 Sass 变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60488806/