相关疑难解决方法(0)

我正在尝试在我的 Angular 项目中使用 Bootstrap 5.2 的某些部分。它是针对 SASS 配置的，因此我在项目的主 style.scss 中导入 Bootstrap 的 scss 文件。我这样做是因为我使用的是 Angular Material，所以只需要 Bootstrap Grid 和其他一些基本部分。

目前我有

样式.scss

@import "~bootstrap/scss/functions";\n@import "~bootstrap/scss/variables";\n@import "~bootstrap/scss/mixins";\n@import "~bootstrap/scss/root";\n@import "~bootstrap/scss/reboot";\n@import "~bootstrap/scss/type";\n@import "~bootstrap/scss/grid";\n

我只包含 root.scss，因为这是 Bootstrap 文档（https://getbootstrap.com/docs/5.1/customize/sass/#variable-defaults）中描述的，但删除它会使 ng 构建仅在grid.scss 作为 $gutters 变量未定义。然而，包含它后 ng build 的输出是：

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Undefined variable.\n   \xe2\x95\xb7\n20 \xe2\x94\x82   @each $color, $value in $theme-colors-rgb {\n   \xe2\x94\x82                           ^^^^^^^^^^^^^^^^^\n   \xe2\x95\xb5\n  node_modules\\bootstrap\\scss\\_root.scss 20:27  @import\n  src\\styles.scss 22:9                          root stylesheet\n\n./src/styles.scss - Error: Module build …

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

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

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

@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

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

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

我在我的 scss 文件中覆盖 bootstrap theme-colors，如下所示

// set variables
$primary: #8dc3a7;
$light: #b4d6c1;
$starorange: #df711b;

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

$custom-theme-colors: (
  "starorange": $starorange,
);

// modify theme colors
$theme-colors: map-merge($theme-colors, $custom-theme-colors);

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

我可以在按钮中使用starorange颜色，如下所示，并且它正确应用了颜色

<button class="btn btn-md btn-starorange">Send</button>

但是，我无法在同一个 HTML 文档中为文本或背景使用相同的颜色，如下所示。

<div class="pb-1 text-starorange">
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
</div>

或者

<section class="bg-starorange">
     .... some html here ... …