Bootstrap root.scss 中未定义变量 $theme-colors-rgb

Question

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

\n

目前我有

\n

样式.scss

\n

@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

\n

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

\n

./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 failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\nHookWebpackError: 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 failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\nHookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Undefined variable.\n    \xe2\x95\xb7\n114 \xe2\x94\x82       @each $key, $value in $gutters {\n    \xe2\x94\x82                             ^^^^^^^^\n    \xe2\x95\xb5\n  node_modules\\bootstrap\\scss\\mixins\\_grid.scss 114:29       @content\n  node_modules\\bootstrap\\scss\\mixins\\_breakpoints.scss 68:5  media-breakpoint-up()\n  node_modules\\bootstrap\\scss\\mixins\\_grid.scss 72:5         make-grid-columns()\n  node_modules\\bootstrap\\scss\\_grid.scss 32:3                @import\n  src\\styles.scss 26:9                                       root stylesheet\n

\n

任何帮助将不胜感激，因为我读过的文章建议做我所做的事情，但显然是他们的工作:)

\n

https://www.amadousall.com/the-best-parts-of-bootstrap-you-are-missing-in-angular-material/

\n

更新

\n

使用此Bootstrap 5 - 自定义主题颜色不更新类\n以下更改（虽然我不想要第三颜色）消除了未定义的 $theme-colors-rgb 的错误，但 $gutters 问题仍然存在

\n

样式.scss

\n

\n@import "~bootstrap/scss/functions";\n@import "~bootstrap/scss/variables";\n@import "~bootstrap/scss/mixins";\n\n$tertiary: #3fb247;\n\n$custom-theme-colors:map-merge($theme-colors, (\n  "tertiary": $tertiary\n));\n\n$theme-colors: map-merge($theme-colors, $custom-theme-colors);\n$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");\n\n@import "~bootstrap/scss/root";\n@import "~bootstrap/scss/reboot";\n\n@import "~bootstrap/scss/grid";\n\n

\n

Answer 1

引导程序5.2

我认为您需要添加，因为5.2 版本中@import "~bootstrap/scss/maps"有一个新的_maps.scss ，其中以下属性已被转移：

$theme-colors-rgb

$utilities-colors

$utilities-text

$utilities-text-colors

$utilities-bg

$utilities-bg-colors

$negative-spacers

$gutters

Answer 2

从 Bootstrap v5.3 开始，我就是这样让它工作的，顺序很重要：

@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/variables-dark';
@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/utilities';

Answer 3

添加到已接受的答案，无法对其进行编辑或评论。

升级到 5.3.0 后，您还必须 @import "~bootstrap/scss/variables-dark"。而且看起来它并没有根据这个 github 问题而改变：https://github.com/twbs/bootstrap/issues/38683