Sass 重写引导5的变量时的导入顺序

当时他们说：

变量重写必须在函数、变量和 mixin被导入，但在其余导入之前

但是，同时，它们提供了两个示例，其中变量重写只出现在它们的函数之后，而它们的变量和mixin是稍后导入的

以下是同一文件中包含的矛盾示例的副本：

// 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

及

---

正确的方法是什么？

引导的神奇之处在于所有变量都声明为！违约图书馆有，你不应该

通常，当您为变量赋值时，如果该变量已经有值，它的旧值将被覆盖。但是有了Bootstrap，一个Sass库，如果没有声明，您分配的变量将不会被覆盖！默认

见：

一般来说，只要CSS还没有生成，在哪里声明变量并不重要，而且如果您已经设置了变量，它们就不会被覆盖

话虽如此，但最好的做法是在函数之后设置您的函数。。。但在root和其他CSS生成scs之前

$utilities变量是例外。如果您声明一个值，那么您将中断实用程序/api CSS生成。而是在导入变量、mixin和实用程序之后，使用实用程序API操作该映射

---

我想，从另一个角度来看，Bootstrap的作者应该与他们的文档更加一致，或者详细说明不一致之处——无论如何，给他们一个问题让他们知道：

我同意这有点误导

变量重写必须在函数、变量和 mixin被导入，但在其余导入之前

如果引用覆盖中的任何引导变量，则此语句为true。例如

// 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

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

// 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

Bootstrap 5仍处于测试阶段，因此文档仍然是WIP。目前有几个与变量相关的开放问题。至于误导性的说法，我会等待发布版本，因为他们正在讨论将基本变量与其他变量分开

// 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