导入单个 Bootstrap 组件时覆盖 Bootstrap Sass 变量不起作用

Question

我无法理解如何在不导入所有引导程序的情况下覆盖/添加默认变量。阅读 Bootstrap 文档提供了两个选项，要么导入所有 bootstrap，要么只导入您需要的部分。

第一个选项，导入所有引导程序：

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

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

// Then add additional custom code here

第二个选项，导入您需要的内容。

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

问题是，如果我执行选项二并尝试覆盖或添加如下变量：

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

//here I try to add additional spacer sizes
$spacer: 1rem;
$spacers: (
  6: ($spacer * 5)
);

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

那么就不行了。如果我做同样的事情但使用第一个选项，如下所示：

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)
$spacer: 1rem;
$spacers: (
  6: ($spacer * 5)
);

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

// Then add additional custom code here

然后它就可以工作了，但现在我正在导入所有的引导程序。我只想知道如何执行第二个选项——仅导入您需要的组件——同时仍然能够覆盖变量。如果您有答案，可以使用我在这里尝试做的间隔示例作为示例。

Answer 1

假设您正在使用 Bootstrap 5（如问题中的文档所示）。为了在修改地图后重建所有实用程序类$spacers，您需要@import“utilities”和“utilities/api”...

@import "functions";
@import "variables";
@import "mixins";

$spacers: map-merge(
    $spacers, (
        6: $spacer*5,
        7: $spacer*6,
    )
);

@import "utilities";
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "utilities/api";

Codeply 上的演示

这将让您只导入您想要的部分。