引用bootstrap之前修改原变量进行更新或添加

在引用Bootstrap之前对原始变量进行修改或添加，通常意味着你要在引入官方Bootstrap库之前对其进行定制。这通常发生在需要自定义项目风格或者想覆盖默认设置的情况。以下是操作流程：

1. **克隆或下载源码**：从Bootstrap GitHub仓库（https://github.com/twbs/bootstrap）克隆或下载最新版本的源代码，获取`scss`目录下的文件，特别是`variables/_variables.scss`。

2. **打开`_variables.scss`**：这个文件包含了所有Bootstrap的核心变量。

3. **定位目标变量**：找到你想要修改或添加的变量，例如颜色、尺寸、间距等。如果你不确定某个变量的位置，可以查阅文档或搜索变量名。

4. **编辑变量**：对于已有变量，你可以直接修改其值；对于新的变量，需要按照之前的变量结构添加新行，比如添加颜色变量：

   $custom-color: #007bff; // 自定义的新颜色

5. **保存更改**：确保对`_variables.scss`进行了原子级的修改，即只针对特定变量，避免影响其他地方。

6. **构建定制版Bootstrap**：使用`npm run build`（如果使用的是npm）或者相应的构建命令（例如Gulp、Grunt），生成定制的CSS文件。

7. **替换或合并**：将生成的CSS文件替换到你的项目中，或者将其与原 Bootstrap CSS 文件合并，确保优先级高于Bootstrap自带的CSS。

8. **测试和调整**：在项目中应用新变量，并测试是否达到预期效果，必要时调整变量值。