如何覆盖自举程序的SASS函数？

众所周知，我们必须重写Bootstrap样式才能使我们的网站焕然一新。否则，通过覆盖它可以看起来很普通，我们可以更改其默认主题背景，字体，颜色，间距等变量。所以在这里我们必须覆盖默认的Bootstrap变量(因为变量负责输出)，为此我们需要在本地进行Bootstrap来做到这一点。我们需要引导SASS代码背后的原始源代码，并且可以使用NPM(节点包管理器)将其作为本地依赖项安装，从而轻松地获得它，并且在安装Node.js时会自动获得它。现在，只需按照下面给出的步骤进行覆盖：

• 步骤1：转到您的项目并打开您的终端或命令行，然后键入command。基本上，此命令将该项目置于npm的控制之下。

  $ npm init -y

• 步骤2：使用命令安装模块/软件包。此后，您将看到一个名为node_modules的新文件夹，并且在该文件夹内，将有一个引导文件夹，在该文件夹内，您将看到一个名为SASS的文件夹。

  $ npm install bootstrap--save 

  现在，不要在该SASS文件夹中进行更改，因为它将无法正常工作，因为您的程序将无法编译或在此处进行编辑，这不会影响已编译和完成的CSS代码，此外，您无需触摸它，因为如果您需要重新安装您的项目并重新安装该依赖项，那么您将覆盖您的更改。因此，为解决此问题，我们继续下一步

• 步骤3：创建您自己的自定义sass文件。让我们创建一个名为main.scss的文件。然后使用命令将所有引导scss文件导入到main.scss文件中

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

  现在，从您的终端类型命令执行您的文件。

  $ sass main.scss main.css;

  现在，这将为您提供main.css文件，该文件现在要大得多，因为它现在包含整个引导程序包。现在，您可以从index.html文件中删除旧的CDN引导程序标记。

• 第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;

示例：我已经安装了节点-modules / packages并创建了自己的main.scss文件，现在让下面的给定代码作为我们的主要代码index.html。

HTML

  
    
    
  
  
    Submit
  

  

由于我们在其中包含了引导程序值，因此在main.scss文件中应用了将反映在最终输出中的更改之后

main.scss

$theme-colors: (
  "primary": #521751,
  "danger": #b80c03
);
@import "node_modules/bootstrap/scss/bootstrap";

输出：

• 在main.scss中进行更改之前：

  

• 进行更改并重新执行之后：

  $ sass main.scss main.css;