Bootstrap v5如何使用@use替代@import自定义并解决变量覆盖失效问题

核心原因 #

你遇到的覆盖失效问题是@use和@import的作用域规则差异导致的：

• @import属于全局导入规则，所有定义的变量、混合宏都会注入全局作用域，Bootstrap内置带!default标记的变量会优先读取你提前定义的全局变量，所以原写法能生效
• @use是Sass的模块化导入规则，默认每个文件的变量都是独立作用域，你在_custom.scss中定义的变量不会自动流入后续导入的Bootstrap模块，自然无法触发覆盖

解决方案 #

方案1：使用with配置项传入变量（官方推荐） #

@use导入模块时支持通过with块传递自定义配置，优先级高于模块内的!default变量，符合模块化设计规范。

1. 调整_custom.scss，仅保留自定义变量：

// _custom.scss
$primary: #ff00f2;
$secondary: #bb6ef5;

2. 调整styles.scss，按顺序导入模块并传递变量：

// styles.scss
// 所有@use语句必须放在文件最顶部
@use 'custom' as *; // as * 表示将custom模块的变量导入当前全局作用域，无需加命名前缀
@use "../node_modules/bootstrap/scss/bootstrap" with (
  $primary: $primary,
  $secondary: $secondary
);

方案2：批量转发变量（适合自定义变量较多的场景） #

如果你需要覆盖的Bootstrap变量很多，不想逐个写在with块中，可以用@forward转发自定义变量：

1. 新建_bootstrap-custom.scss：

// _bootstrap-custom.scss
@forward 'custom';
@forward "../node_modules/bootstrap/scss/bootstrap";

2. 在styles.scss中直接导入转发后的模块即可：

// styles.scss
@use 'bootstrap-custom' as *;

注意事项 #

• 不要混用@import和@use，否则会出现样式重复加载、作用域混乱的问题，建议全项目统一使用@use/@forward替代所有@import语句
• @use语句必须放在文件最顶部，前面不能出现变量定义、样式规则等其他代码

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