极客教程如何覆盖SASS函数的bootstrap
我们都知道，我们必须覆盖Bootstrap的风格，给我们的网站一个新的外观。否则，它将看起来很普通，通过覆盖，我们可以改变其默认的主题背景、字体、颜色、间距等变量。所以在这里我们必须覆盖默认的Bootstrap变量（因为变量是负责输出的）。要做到这一点，我们需要bootstrap本地来做。我们需要bootstrap背后的原始源代码，即SASS代码，我们可以通过NPM（节点包管理器）将其作为本地依赖项安装，在安装Nodejs时自动获得。现在只需按照下面的步骤覆盖.SASS代码。
- 第1步：进入你的项目，打开你的终端或命令行，然后输入命令。基本上，这个命令将这个项目置于npm的控制之下。
$ npm init -y
- 第2步：使用命令安装模块/包。之后，你会看到一个名为node_modules的新文件夹，在该文件夹中，会有一个bootstrap文件夹，在里面，你会看到一个名为SASS的文件夹。
$ npm install bootstrap--save
现在不要在那个SASS文件夹里做修改，因为这样做是不行的，因为你的程序不会被编译，或者你在这里编辑的东西不会影响到编译完成的CSS代码，另外，你不要碰这个，因为如果你需要重新安装你的项目，重新安装那个依赖，那么你的修改就会被覆盖。因此，为了解决这个问题，我们按照下一步的步骤进行
- 第3步：创建你自己的自定义sass文件。让我们创建一个名为main.scss的文件。然后用命令导入所有的bootstrap scss文件到你的main.scss文件。
@import "node_modules/bootstrap/scss/bootstrap";
现在从你的终端输入命令来执行你的文件。
$ sass main.scss main.css;
现在，这将得到你的main.css文件，它现在大得多，因为现在它包括整个bootstrap包。现在你可以从你的index.html文件中删除你的旧CDN bootstrap标签。
- 第4步：现在你可以简单地在main.scss文件中写下你的默认值，你所要做的就是写下如下命令
$theme-colors: (
"primary": #521751,
"danger": #b80c03
);
当跨Sass文件重写时，你的重写必须在你导入Bootstrap的Sass文件之前进行。因此，我们必须在我们的
@import "node_modules/bootstrap/scss/bootstrap";
现在当我们在导入的Bootstrap Sass文件上面写代码时，我们可以重新执行。而一旦完成，你就可以看到变化了。
$ sass main.scss main.css;
例子：我已经安装了node -modules/packages，并创建了我自己的main.scss文件，现在让下面的代码作为我们的主代码说index.html。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"/>
</head>
<body>
<button type="submit" class="btn btn-primary">Submit</button>
</body>
</html>
</html>
由于我们在其中包含了bootstrap的值，所以在我们的main.scss文件中应用变化后，将反映在我们的最终输出中
$theme-colors: (
"primary": #521751,
"danger": #b80c03
);
@import "node_modules/bootstrap/scss/bootstrap";
输出:
- 在对main.scss进行修改之前。
- 在进行修改并重新执行后。
$ sass main.scss main.css;
