使用Bootstrap部分导入模式时React TypeScript应用样式丢失

问题背景 #

通过npx create-react-app@latest --template typescript创建TypeScript React项目，执行npm i bootstrap sass安装依赖后，全量引入@import '~bootstrap/scss/bootstrap.scss'时，Bootstrap按钮样式正常显示；但按照官方文档"选项B：引入Bootstrap的部分内容"修改custom.scss后，按钮的btn btn-primary类完全失去格式和颜色。

问题原因 #

当前的custom.scss仅引入了Bootstrap的基础工具函数、变量、布局类和通用样式，但未加载按钮组件对应的样式文件。Bootstrap的按钮样式定义在bootstrap/scss/components/buttons中，缺少这部分引入会导致按钮无法应用Bootstrap的样式规则。

解决方案 #

在custom.scss中添加按钮组件的SCSS文件引入，修改后的文件如下：

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
// 新增按钮组件样式引入
@import "../node_modules/bootstrap/scss/components/buttons";
@import "../node_modules/bootstrap/scss/utilities/api";

修改后重启npm start，按钮即可恢复正常的Bootstrap样式。

补充说明 #

如果后续需要使用Bootstrap的其他组件（如卡片、表单、导航栏等），需在custom.scss中对应位置引入Bootstrap SCSS目录下components、forms等子目录中的对应文件。例如需要表单输入框样式，可添加@import "../node_modules/bootstrap/scss/forms/form-control";。

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