Angular（CSS环境）下修改Bootstrap主题色后如何重新编译生效？

我明白你现在的困扰——改了Bootstrap的变量却没生效，还因为项目用CSS、自己没接触过SCSS而无从下手。别担心，我一步步给你讲清楚怎么解决：

先搞懂为什么直接修改node_modules里的文件没用 #

• 第一，node_modules是依赖包的原始存放目录，每次执行npm install都会重新覆盖里面的文件，你的修改会直接丢失；
• 第二，你的Angular项目目前用的是CSS，没有配置SCSS编译流程，就算改了SCSS变量，也不会被转换成能生效的CSS代码。

具体解决步骤 #

步骤1：安装SCSS编译依赖 #

首先确保项目支持SCSS编译，执行以下命令安装sass：

npm install sass --save-dev

步骤2：创建自定义Bootstrap变量覆盖文件 #

不要碰node_modules里的文件，我们自己创建一个SCSS文件来重写变量：
在src/styles目录下新建_custom-bootstrap.scss（没有styles目录就自己建），写入以下内容：

// 这里写你要修改的Bootstrap变量，比如主题色
$primary: #2563eb;   // 换成你想要的颜色值
$secondary: #6b7280;
$success: #10b981;

// 一定要在变量之后导入Bootstrap核心SCSS
@import "~bootstrap/scss/bootstrap";

重点：变量必须写在导入Bootstrap之前，这样才能覆盖默认值。

步骤3：修改Angular全局样式配置 #

把项目的全局样式切换为我们的自定义SCSS文件：
打开angular.json，找到architect > build > options > styles配置项，替换成我们的SCSS文件路径：

"styles": [
  "src/styles/_custom-bootstrap.scss"
]

如果原来的styles.css里有自己写的自定义样式，可以把内容迁移到_custom-bootstrap.scss末尾，或者在_custom-bootstrap.scss最后导入它：

// 导入原自定义CSS
@import "../styles.css";

步骤4：重启项目验证 #

停止当前的npm服务，重新启动：

ng serve

等项目编译完成后，就能看到修改的主题色已经生效了。

小提示 #

以后再要调整Bootstrap变量，直接修改_custom-bootstrap.scss里的变量值就行，Angular会自动重新编译，不用手动重启项目（除非改了angular.json配置）。

内容的提问来源于stack exchange，提问作者Mateo Randwolf