覆盖 Bootstrap 5 的变量时的导入顺序

Question

Variable overrides must come after our functions, variables, and mixins are imported, but before the rest of the imports.

但是，与此同时，他们提供了两个示例，其中变量覆盖仅出现在它们的函数之后，而它们的变量和混合宏是稍后导入的。

这是同一文档中包含的相互矛盾示例的副本：

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

// 5. Add additional custom code here

和

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

// Default variable overrides
$body-bg: #000;
$body-color: #111;

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

// Bootstrap and its default variables

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

正确的方法是什么？

Answer 1

Bootstrap的神奇之处在于所有变量都声明为!default。（图书馆有，你不应该。）

通常当你给一个变量赋值时，如果该变量已经有一个值，它的旧值会被覆盖。但是使用 Bootstrap，一个 Sass 库，如果你分配的变量没有被声明 !default.

，它们将不会被覆盖

参见：https://sass-lang.com/documentation/variables#default-values

一般来说，只要 CSS 尚未生成，您在哪里声明变量并不重要 - 如果您设置了变量，它们将不会被覆盖。

话虽如此 - 最好在 functions 之后设置您的...但在 root 和其他 CSS 代 SCSS.[=22 之前=]

$utilities 变量是个例外。如果您声明一个值，您将打破 utilities/api CSS 代。在导入 variables、mixins 和 utilities.

之后，使用实用程序 API（参见 https://getbootstrap.com/docs/5.0/utilities/api/）操作该地图

我想，换个角度看，Bootstrap 作者应该与他们的文档更加一致，或者详细说明不一致之处——无论如何，给他们一个“问题”让他们知道：https://github.com/twbs/bootstrap/issues

Answer 2

我同意这有点误导..

"Variable overrides must come after our functions, variables, and mixins are imported, but before the rest of the imports."

这句话是正确的，如果您在覆盖中引用了任何 Bootstrap 变量。例如...

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

// Variable overrides (referencing other Bootstrap vars)
$body-bg: $red;
$body-color: $gray-800;

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

overrides example referencing Bootstrap vars

但是文档中的示例是正确的（并且有效），因为它没有在覆盖中引用任何 Bootstrap 变量...

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

// Default variable overrides
$body-bg: #000;
$body-color: #111;

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

// Bootstrap and its default variables

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

overrides example not referencing Bootstrap vars

Bootstrap 5 仍处于 Beta 阶段，因此文档仍处于 WIP 状态。目前有几个与变量相关的未解决问题 (example)。至于误导性的短语，我会等待发布版本，因为他们正在谈论将基本变量与其他变量分开。

覆盖 Bootstrap 5 的变量时的导入顺序

Order of importing when overriding variables of Bootstrap 5

sass

bootstrap-5