如何在基于reactstrap的React项目中自定义Bootstrap 4并保留修改？

嗨，作为刚接触React和Web开发的新手，你遇到的这个Bootstrap主题定制问题其实很常见，别担心！下面一步步给你讲清楚正确的做法：

你找不到custom.scss是因为create-react-app默认不会生成这个文件，得咱们自己动手创建，步骤很简单：

1. 首先安装SCSS编译工具node-sass，在项目根目录运行：

   npm install node-sass --save
   

2. 在项目的src文件夹下新建一个custom.scss文件（名字可以自己取，比如theme.scss也没问题）。
3. 在这个文件里，先定义你要修改的Bootstrap变量，再导入Bootstrap的源SCSS文件，比如：

   // 这里写你要自定义的变量，覆盖Bootstrap默认值
   $primary: #20c997; // 把默认蓝色主色改成薄荷绿
   $secondary: #6c757d;
   $border-radius: 0.5rem; // 调整圆角大小
   
   // 导入Bootstrap的SCSS源文件（注意用~指向node_modules）
   @import '~bootstrap/scss/bootstrap';
   

   这里的~是告诉webpack去node_modules目录里查找Bootstrap的SCSS文件。
4. 最后修改src/index.js文件，把原来导入Bootstrap编译好的CSS的代码：

   import 'bootstrap/dist/css/bootstrap.min.css';
   

   替换成导入咱们自己的SCSS文件：

   import './custom.scss';
   

   这样启动项目时，node-sass会自动编译这个SCSS文件，你的自定义变量就会覆盖Bootstrap的默认值啦。

你不用担心node_modules被忽略的问题——因为咱们的自定义样式都写在src目录下的custom.scss里，这个文件是属于你的项目代码，会被Git追踪。而node_modules里的Bootstrap文件只是依赖包，更新时会被替换，但你的自定义文件完全不受影响，这也是Bootstrap官方推荐的主题定制方式。

⚠️ 记住：永远不要直接修改node_modules里的Bootstrap文件！这些文件不会被Git保存，下次更新包的时候就会被完全覆盖掉，你的修改就没了。

• 如果你不知道哪些变量可以修改，可以打开node_modules/bootstrap/scss/_variables.scss文件，里面列出了Bootstrap所有的默认变量，找到你想改的，复制到自己的custom.scss里修改值就行。
• 要是想加自己的额外样式，也可以写在custom.scss里，放在@import语句之后，这些样式会自动覆盖Bootstrap的默认样式。
• 修改完SCSS文件后，项目会自动热重载，你马上就能看到修改后的效果啦。

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