如何在Next.js TypeScript项目中扩展Bootstrap工具类并解决SassError报错

这个报错的核心原因是当前编译的.module.scss文件作用域内没有找到.text-center对应的选择器定义：Next.js的CSS Module是独立编译的，即便你在全局引入过Bootstrap，单个模块的@extend只会查找当前文件内导入的选择器。你可以任选以下方案解决：

方案1：当前模块内导入Bootstrap对应样式 #

在你的Step0.module.scss文件顶部按顺序添加导入即可，注意自定义变量要放在Bootstrap自带变量导入之前才能生效：

// 可选：先导入你自己写的Bootstrap变量覆盖文件
@import "./custom-bootstrap-vars.scss";
// 导入Bootstrap核心依赖及用到的样式模块
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/typography"; // .text-center定义在这个模块内

.welcome {
    @extend .text-center;
}

如果有多个模块需要扩展Bootstrap类，你可以把上面的公共导入提取成一个单独的_bootstrap-common.scss片段文件，在需要的模块里直接导入这个片段即可，不会重复打包。

方案2：用全局选择器标记扩展 #

如果你已经在全局样式文件里完整引入了Bootstrap全量样式，不想在模块里重复导入依赖，可以用CSS Module的:global语法标记要扩展的类属于全局作用域：

.welcome {
    @extend :global(.text-center);
}

方案3：临时调试用!optional标记 #

如果只是临时调试，不要求强制扩展生效，可以直接按报错提示添加!optional标记，找不到目标选择器时Sass会直接跳过扩展逻辑，不会抛出错误：

.welcome {
    @extend .text-center !optional;
}

⚠️ 该方案不推荐生产环境使用，若确实未引入对应样式，扩展规则会直接失效。

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