更新2022（Bootstrap 5）

一般来说，自定义Bootstrap 5 SASS的工作方式与Bootstrap 4相同。但是，有些Map已经更改（并且添加了新的Map），因此您应该follow the Bootstrap SASS documentation了解如何添加、删除或修改任何Map的详细信息。
最近关于这篇文章的评论表明，关于定制和导入的顺序仍然存在一些混乱。然而，这个概念并没有改变……

“变量重写必须在我们的函数导入之后，但在其余导入之前”

由于SASS变量默认值的工作方式， Bootstrap （“导入的其余部分”）应该在任何变量自定义/更改之后导入。由于变量更改将不包含!default标志，因此当 Bootstrap 在最后导入时，您的更改将不会被 Bootstrap 默认值覆盖。
The proof is in the pudding

这里是如何覆盖/自定义Bootstrap 4与SASS...

覆盖和自定义应保存在独立的custom.scss文件中，该文件与Bootstrap SASS源文件分开。这样，您所做的任何更改都不会影响Bootstrap源代码，这使得以后更改或升级Bootstrap变得更加容易。
1-考虑Bootstrap的SASS文件夹结构，以及您的custom.scss...

|-- \bootstrap
|   |-- \scss
|   |   |-- \mixins
|   |   |-- \utilities
|   |   |-- bootstrap.scss
|   |   |-- variables.scss
|   |   |-- functions.scss
|   |   |-- ...more bootstrap scss files
|   custom.scss

2-在custom.scss中，导入覆盖所需的Bootstrap文件。（* 通常 ，这只是*variables.scss**。在某些情况下，对于更复杂的cutomizations，您可能还需要functions、mixins和其他Bootstrap文件。进行更改，然后@import "bootstrap"。在 * 更改后导入Bootstrap * 很重要...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* make changes to the !default Bootstrap variables */    
$body-color: green;
        
/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

2a（optional）-此外，您可以在@import "bootstrap";之后 * 扩展现有的Bootstrap类**以创建新的 * 自定义 * 类。例如，下面是一个新的.row-dark类，它继承了Bootstrap .row类，然后添加了一个背景色。

/* create new custom classes from existing classes */
 .row-dark {
    @extend .row;
    background-color: #333333;
    color: #ffffff;
 }

3-编译SASS（node-sass、gulp-sass、webpack/NPM等）。CSS输出将包含覆盖！如果@imports失败，不要忘记检查includePaths。对于可以覆盖的变量的完整列表，请参见variables.scss文件。还有这些全局变量。
Bootstrap SASS Demo on Codeply

总的来说，它是这样工作的：

1_首先，当使用SASS处理custom.scss文件时，会出现！默认值在bootstrap/variables.scss中定义。
2_接下来，我们的自定义值被设置，这将覆盖任何已经设置的变量！bootstrap/variables.scss中设置的默认值。
3_最后，导入Bootstrap（@import "bootstrap"），启用SASS处理器（A.K.A.编译器）使用Bootstrap默认值和自定义覆盖生成所有适当的CSS。
对于那些不知道SASS的人，试试我做的这个tool。
另见：
How to get 15 columns in Bootstrap 4 in SASS CSS?
Bootstrap v4网格大小/ Sass列表
Customizing Bootstrap CSS template
扩展Bootstrap 4和SASS

我将从头开始解释：下载Ruby，因为Sass是用Ruby写的。打开“start command prompt with Ruby”并输入以下内容：

gem install sass

在macos中，ruby已经安装好了。所以在终端中：

sudo gem install sass

如果您确实通过包管理器安装了bootstrap;将此代码写入main.scss

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

然后导航到保存main.scss或main.css文件的工作目录。在命令行中输入以下代码：

sass main.scss main.css

这将初始化将SASS编译成CSS。
如果您确实下载了 Bootstrap 源文件，请在源文件夹中找到“scss”文件夹

BOOTSTRAP\bootstrap-4.2.1\bootstrap-4.2.1\scss

并复制到你的风格文件夹在你的项目，你保持所有的样式文件：css，scss，引导，然后导入“bootstrap.scss”文件到main.scss

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

现在通过输入以下代码来初始化编译：

sass main.scss main.css

最后，您可以键入：

sass --watch main.scss:main.css //this should be running

要查看main.css中的所有更改，请记住：你将把你的css代码写进main.scss，sass会把它编译成main.css，你会在你的html中链接main.css文件。
如果你使用的是Visual Studio代码，你可以安装“Live Sass Compiler”扩展，下面你会看到“Watch Sass”按钮。在style文件夹中创建main.scss文件，按照我上面解释的方式导入文件后，点击“watch Sass”按钮，它将开始编译。
现在在bootstrap文件夹中，scss文件夹下有_variables.scss文件夹。这包含引导变量。假设您想更改边界半径。在main.scss文件中，在导入引导之前：

$border-radius:10rem
@import "./scss/bootstrap.scss";

我花了一点时间拼凑了一个足够的教程来安装和使用sass与homebrew在node/express项目中编辑bootstrap 4。
使用自制软件安装sass

brew install sass/sass/sass

在项目中安装bootstrap

npm install bootstrap --save

更改为资产目录，创建sass目录，创建应用程序和自定义文件

cd public/assets/css && mkdir sass && touch sass/app.scss sass/custom.scss

在app.scss中添加以下内容

// import bootstrap files
@import "../../../../node_modules/bootstrap/scss/functions";
// import bootstrap defaults
@import "../../../../node_modules/bootstrap/scss/variables";
// import customization
@import "custom.scss";
// finally, import Bootstrap to set the changes!
@import "../../../../node_modules/bootstrap/scss/bootstrap";

在custom.scss中添加一个示例自定义

$hotness: #fb3f7c;
$link-color: $hotness;

运行sass;自动导出/更新.css文件

sass --watch sass/app.scss sass/bootstrap.css

在html中链接到新的引导文件
参考文献

• https://getbootstrap.com/docs/4.0/getting-started/theming/
• https://sass-lang.com/install

Bootstrap的Github版本总是在变化，因为基础本身也在不断更新。更不用说，Bootstrap的结构方式，它不一定编译您的SASS编译器将导出的方式。最好的做法是以最适合您的方式构建它。
这是我通常如何构建我的整个项目

/style/
/style/theme.scss
/style/theme.min.css
/style/bootstrap.scss
/style/bootstrap.min.css
/style/bootstrap/{subfiles}
/style/bootstrap/mixins/{subfiles}
/style/bootstrap/utilities/{subfiles}

/scripts/
/scripts/bootstrap.min.js
/scripts/main.min.js
/scripts/bootstrap/

这里假设你有sass和js minifier。