React项目中复用Bootstrap SCSS媒体查询与混合并避免重复加载

核心思路 #

不要在每个组件SCSS里导入完整Bootstrap，只导入Bootstrap的变量、混合宏和媒体查询核心模块，既复用样式能力，又避免重复加载冗余代码。

具体实现步骤 #

1. 创建共享SCSS文件 #

在项目src/styles/目录下新建bootstrap-shared.scss，只引入你需要的Bootstrap核心部分：

// 仅导入Bootstrap的工具函数、变量、混合宏和断点配置
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/breakpoints';

按需扩展：如果需要用Bootstrap的工具类，可以额外添加@import '~bootstrap/scss/utilities';

2. 全局注入共享文件（可选） #

根据项目构建工具配置，让所有组件SCSS自动引入这个共享文件，无需手动导入：

• Create React App：在src/index.scss中导入bootstrap-shared.scss，再在index.tsx里引入index.scss即可，全局样式会被所有组件共享。
• 自定义Webpack配置：在sass-loader的选项中添加additionalData（旧版本用prependData），自动注入共享文件：

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: `@import "~src/styles/bootstrap-shared.scss";`,
            },
          },
        ],
      },
    ],
  },
};

3. 在组件SCSS中直接使用Bootstrap能力 #

现在可以在任意组件SCSS里调用Bootstrap的媒体查询混合宏或变量，比如：

// dashboard.scss
.dashboard-container {
  padding: 1rem;

  // 使用Bootstrap响应式混合宏
  @include media-breakpoint-up(md) {
    padding: 2rem;
  }

  // 直接用断点变量写媒体查询
  @media (min-width: $breakpoint-lg) {
    max-width: 1200px;
    margin: 0 auto;
  }
}

4. 全局导入完整Bootstrap（按需） #

如果需要Bootstrap的基础全局样式（比如重置样式、默认组件样式），只在全局入口文件（如index.scss）导入一次即可：

// src/index.scss
@import './styles/bootstrap-shared.scss';
@import '~bootstrap/scss/bootstrap';

关键优势 #

• 避免Bootstrap代码重复编译，减小最终打包体积
• 统一管理Bootstrap配置，可在bootstrap-shared.scss中覆盖变量（如修改断点值），所有组件自动生效
• 组件SCSS无需重复写导入语句，保持代码简洁

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