如何通过app.scss修改Bootstrap中的$spacer变量

• 绝对不要直接修改node_modules内的文件，一来版本更新会覆盖你的修改，二来多人协作时无法同步这些改动，完全不符合你多项目复用模板的需求。
• 正确的做法是在导入Bootstrap的SCSS文件之前，先加载你的自定义_variables.scss：
  1. 在自定义_variables.scss里重新定义$spacer变量，示例：

     // 自定义_variables.scss
     $spacer: 1.5rem; // 替换成你需要的数值
     

  2. 在项目主SCSS文件（比如main.scss）里按以下顺序导入：

     // 先加载自定义变量，让Bootstrap读取时优先使用这个值
     @import "./path/to/your/_variables.scss";
     // 再导入Bootstrap核心SCSS文件
     @import "../node_modules/bootstrap/scss/bootstrap.scss";
     

• 之前后加载自定义变量无效的原因：Bootstrap的变量是在导入编译阶段确定值的，后加载的变量无法覆盖已经生成的margin/padding类样式。必须让自定义变量在Bootstrap处理自身变量前生效，这样Bootstrap会直接用你定义的$spacer生成所有间距类。
• 不需要使用!important，按上述顺序导入就能原生覆盖变量，生成的样式完全基于你的自定义值，既优雅又可靠。

内容的提问来源于stack exchange，提问作者Jelle Stekelenburg