如何在React组件中正确集成Bootstrap Sass并解决依赖报错问题

问题背景 #

使用react-bootstrap作为UI框架时，当前在App.scss和组件级SCSS文件中重复导入Bootstrap Sass文件，虽样式运行正常，但担心CSS冗余；若移除组件内的Bootstrap导入，使用media-breakpoint-down这类Bootstrap Mixin时会抛出依赖缺失报错。

当前导入示例 #

App.scss 代码

@import "../../node_modules/bootstrap/scss/bootstrap.scss";
@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/mixins';
@import '../../node_modules/bootstrap/scss/variables';
@import '../../node_modules/bootstrap/scss/grid';
...
html, body {
  font-family: var(--font-main, sans-serif);
}
* {
  font-family: var(--font-main, sans-serif);
}
// 其余代码

组件级SCSS（ProductsCategory.scss）代码

// File path: resources/js/components/ProductsCategory/ProductsCategory.scss

@import "../../../../node_modules/bootstrap/scss/bootstrap.scss";
@import '../../../../node_modules/bootstrap/scss/functions';
@import '../../../../node_modules/bootstrap/scss/mixins';
@import '../../../../node_modules/bootstrap/scss/variables';
@import '../../../../node_modules/bootstrap/scss/grid';

@import '../../../scss/custom_mixins';
.featured-category {
... 组件自定义样式
}

// 使用Bootstrap Mixin
@include media-breakpoint-down(md) {
    .featured-category {
        background-color: red !important;
    }
}

解决方案：避免重复导入，共享基础依赖 #

核心思路是全局仅导入一次完整Bootstrap样式，组件仅依赖Bootstrap的工具类文件（函数、变量、Mixin），同时简化导入路径。

1. 配置SCSS全局基础依赖注入（推荐） #

通过构建工具配置，自动给所有SCSS文件注入Bootstrap的基础依赖，避免手动重复导入。以Create React App+Craco为例，在craco.config.js中添加配置：

module.exports = {
  style: {
    sass: {
      loaderOptions: {
        additionalData: `
          @import "~bootstrap/scss/functions";
          @import "~bootstrap/scss/variables";
          @import "~bootstrap/scss/mixins";
        `
      }
    }
  }
};

若使用Webpack，可在sass-loader的additionalData中添加相同内容。

2. 全局仅导入一次完整Bootstrap样式 #

修改App.scss，只导入一次完整Bootstrap，同时可提前覆盖Bootstrap变量：

// App.scss
// 先覆盖Bootstrap默认变量（必须在导入Bootstrap前）
$font-main: sans-serif;

// 导入完整Bootstrap样式
@import "~bootstrap/scss/bootstrap.scss";

// 全局自定义样式
html, body {
  font-family: $font-main;
}
* {
  font-family: $font-main;
}
// 其余全局样式

3. 组件级SCSS简化导入 #

组件SCSS无需再导入完整Bootstrap或基础依赖，直接使用Bootstrap的Mixin/变量即可：

// ProductsCategory.scss
@import '../../../scss/custom_mixins';

.featured-category {
  // 组件自定义样式
}

// 直接使用Bootstrap Mixin
@include media-breakpoint-down(md) {
  .featured-category {
    background-color: red !important;
  }
}

备选方案（无构建工具配置时） #

若无法修改构建配置，可创建一个统一的基础依赖文件_bootstrap-base.scss：

// _bootstrap-base.scss
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

之后在组件SCSS中只需导入该文件：

@import '../../path/to/_bootstrap-base.scss';

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