如何在React(Next.js)组件SASS模块中使用Bootstrap的SASS变量？

问题场景 #

在Next.js项目中结合SASS使用Bootstrap时，组件的作用域SASS模块（如style.module.scss）无法识别Bootstrap的SASS变量（如$font-size-lg），报错提示变量未定义。现有文件代码如下：

• /styles/style.scss

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/maps";

@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/utilities/api";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";

• /pages/_app.tsx

import '../styles/style.scss'

• /components/text/style.module.scss

.text {
    font-size: $font-size-lg;
}

解决方案 #

方法1：组件模块内手动导入Bootstrap变量

在每个需要使用Bootstrap变量的组件SCSS模块中，直接导入Bootstrap的变量（及相关函数、混合宏）文件：

// /components/text/style.module.scss
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

.text {
    font-size: $font-size-lg;
}

• 优势：仅在需要的模块中导入，无冗余；
• 劣势：每个用到变量的模块都需重复导入代码。

方法2：配置Next.js全局自动导入

通过next.config.js配置SASS选项，让所有SCSS模块自动导入Bootstrap的核心变量文件，无需手动操作：

1. 项目根目录创建或修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    additionalData: `
      @import "~bootstrap/scss/functions";
      @import "~bootstrap/scss/variables";
      @import "~bootstrap/scss/mixins";
    `,
  },
};

module.exports = nextConfig;

2. 重启Next.js开发服务器，之后所有组件SCSS模块可直接使用Bootstrap变量。

• 优势：一次配置全局生效，无需重复导入；
• 劣势：所有SCSS模块都会包含这些导入内容，编译体积略有增加（可忽略）。

方法3：自定义全局变量中转文件

创建一个统一的中转SASS文件管理Bootstrap变量，再配置Next.js自动导入该文件，便于后续自定义变量或覆盖Bootstrap默认值：

1. 创建/styles/_bootstrap-variables.scss：

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// 可在此添加自定义变量或覆盖Bootstrap默认变量
// 例：$font-size-lg: 2rem !default;

2. 修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    additionalData: `@import "~/styles/_bootstrap-variables.scss";`,
  },
};

module.exports = nextConfig;

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