bootstrap 自定义

Question

老师你好
想自定义改变 bootstrap 里面 primary 颜色
看了很久官网 Sass maps and loops docs ，也没有看明白应该怎样修改

1. 自定义sass 文件应该放在哪里呢，后缀是 scss 吗
2. 第二步如何在 map 中设置呢？是要修改哪个文件吗

老师能帮忙解惑一下吗

Answer 1

张轩 2022-08-03 10:05:22

同学你好  给你自己写了一遍

在 src 新建 custom.scss

// 在这里设定你的变量，所有的变量名称可以看：bootstrap/scss/variables 这个文件
$primary: #0074d9;
// 引入整体的库，这个时候上面定义的变量就会将默认值覆盖掉，注意这个文件引入要在定义变量的下方
@import "../node_modules/bootstrap/scss/bootstrap";

然后在原来引入 bootstrap 的地方，引入这个文件

import './custom.scss'

注意加入 vue-cli 报错没有 sass-loader 就装一下。

npm install sass sass-loader -D

然后颜色就变啦

• 提问者 慕莱坞3345942 #1

  非常感谢！辛苦了

Answer 2

张轩 2022-08-02 09:50:27

同学你好

主要是这个文档：

https://getbootstrap.com/docs/5.2/customize/sass/#maps-and-loops

先创建一个 custom.scss 文件，在项目中引用这个文件。

// 在这里设定你的变量，所有的变量名称可以看：bootstrap/scss/variables 这个文件
$primary: #0074d9;
// 引入整体的库，这个时候上面定义的变量就会将默认值覆盖掉，注意这个文件引入要在定义变量的下方
@import "node_modules/bootstrap/scss/bootstrap";

试一下行不行～

• 提问者 慕莱坞3345942 #1

  老师你好，还是不太会，完成 custom.scss 文件之后，如何应用更改呢。
  此时项目内是通过 ` import 'bootstrap/dist/css/bootstrap.min.css' ` 引入的 bootstrap，是需要在哪里引入 scss 文件，还是要重新编译 bootstrap 呢
  还望老师解答