使用 sass 为引导程序定制设置文件

Question

您好，我正在尝试使用 sass 设置 bootstrap 进行自定义，我创建了一个 html 页面，然后当我在 custom.scss 文件上添加自己的自定义属性时，它们似乎对我的页面没有任何影响。

据我所知，我已经尝试使用缺少的 Bootsrap 5 教科书进行逐步指导，然后我尝试使用 Bootstrap 5 网站本身，但遇到了同样的问题，因为我的自定义属性没有被实现，我有一种感觉项目设置的方式，但似乎无法找出问题，从昨天开始就一直在尝试。项目设置的屏幕截图

Answer 1

首先，下载bootstrap文件并将其存放在一个文件夹中。 这是版本 5.3.3 的链接。

您只需要包含所有

scss

文件的

scss

文件夹。确保您可以使用您最喜欢的 sass 编译器将文件

scss/bootstrap.scss

编译为

bootstrap.css

。例如，对 VS 代码使用扩展“Easy Compile”。

现在是时候创建

main.scss

文件，其中将包含引导程序，可以选择修改它，当然也可以包含所有其他样式。

main.scss

// overrides for bootstrap:
$primary : #FEBC35;
$body-bg: red;

// include bootstrap
@import "path/to/bootstrap.scss";

// your other styles:
h1 {
  background: blue;
}

最后，将编译后的

main.css

包含在您的 HTML 文件中

<link rel='stylesheet' href='path/to/main.css'>