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

Question

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

\n

我已阅读文档并在 YouTube 上看到了一些教程，但我看不出问题出在哪里

\n

我正在使用 bootstrap 5.1.0 、 sass 3\n这是我的 scss 文件：

\n

@import "../../node_modules/bootstrap/scss/variables";\n\n$theme-colors: (\n"primary": //some color here,\n);\n\n@import "../../node_modules/bootstrap/scss/bootstrap";\n

\n

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

\n

PS F:\\Coding\\projects\\sepehr\\client\\src\\styles> sass style.scss custom.css\nError: ("primary": #0d6efd, "secondary": #6c757d, "success": #198754, "info": #0dcaf0, \n"warning": #ffc107, "danger": #dc3545, "light": #f8f9fa, "dark": #212529) isn't a valid \nCSS value.\n   \xe2\x95\xb7\n94 \xe2\x94\x82 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;\n   \xe2\x94\x82                             ^^^^^^^^^^^^^\n   \xe2\x95\xb5\n

\n

Answer 1

您还需要导入函数和 mixin...

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

另请参阅：Bootstrap 5 - 自定义主题颜色不更新类