如何用@use和/或@forward替代@import导入bootstrap.scss？

完全可以，Bootstrap从v5.2.0版本开始正式支持Sass模块系统（@use/@forward），官方也推荐用这两个语法替代旧的@import（后者已被Sass官方标记为废弃）。

1. 使用@use导入Bootstrap #

这是最直接的方式，能精准控制Bootstrap的变量、混合宏和样式的使用：

• 基础导入：在自定义Sass文件开头添加（路径需匹配项目结构，比如Bootstrap在node_modules中时，路径可能需要调整）：

  @use "bootstrap";
  

• 覆盖默认变量：要修改Bootstrap的默认变量，必须在@use之前声明自定义变量——因为Sass模块系统中，导入前的变量会优先覆盖模块内的默认值：

  // 自定义变量，覆盖Bootstrap默认值
  $primary: #e63946;
  $body-bg: #f1faee;
  $border-radius: 0.5rem;
  
  // 导入Bootstrap
  @use "bootstrap";
  

• 命名空间控制：@use默认会给导入的模块添加命名空间，调用混合宏或变量时需要加上前缀，比如bootstrap.$primary或@include bootstrap.hover-focus()。如果想省略命名空间，可以用as *：

  @use "bootstrap" as *;
  // 直接使用，无需前缀
  @include hover-focus();
  

2. 使用@forward转发Bootstrap #

如果项目有多个Sass文件，想要统一管理Bootstrap的导入和变量覆盖，可以用@forward将Bootstrap的成员转发到其他文件：

• 带变量覆盖的转发：在入口Sass文件中先定义变量，再转发Bootstrap：

  // 自定义变量
  $primary: #457b9d;
  
  // 转发Bootstrap并覆盖指定变量
  @forward "bootstrap" with (
    $primary: $primary,
    $body-color: #1d3557
  );
  

• 其他文件只需导入这个入口文件，就能使用已经完成变量覆盖的Bootstrap样式和成员，无需重复配置。

注意事项 #

• 确保Bootstrap版本≥5.2.0，旧版本不支持Sass模块系统。
• 不要混合使用@import和@use，两者作用域规则不同，可能导致样式冲突或变量不生效。
• 若使用构建工具（如Webpack、Vite），可配置Sass的includePaths指向node_modules/bootstrap/scss，导入时无需写完整路径，直接用@use "bootstrap";即可。

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