使用sass 3自定义Bootstrap 5颜色时出现无效的CSS值错误

2022-08-25 00:00:00 css sass bootstrap-5

我想用sass更改bootstrap的默认主题颜色,问题是当我更改颜色并进行编译时,它会给出无效的CSS值错误。

我已经在YouTube上看了文档和一些教程,但我看不出问题出在哪里

我使用的是Bootstrap 5.1.0,sass 3 这是我的SCSS文件:

@import "../../node_modules/bootstrap/scss/variables";

$theme-colors: (
"primary": //some color here,
);

@import "../../node_modules/bootstrap/scss/bootstrap";

这是我在终端中收到的错误

PS F:Codingprojectssepehrclientsrcstyles> sass style.scss custom.css
Error: ("primary": #0d6efd, "secondary": #6c757d, "success": #198754, "info": #0dcaf0, 
"warning": #ffc107, "danger": #dc3545, "light": #f8f9fa, "dark": #212529) isn't a valid 
CSS value.
   ╷
94 │ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
   │                             ^^^^^^^^^^^^^
   ╵

解决方案

您还需要导入函数和混合...

@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";

另见:Bootstrap 5 - Custom theme-colors not updating classes

相关文章