将SCSS转CSS时出现‘primary’: $primary-text-emphasis-dark错误求助

问题描述 #

在将SCSS转换为CSS时遇到'primary': $primary-text-emphasis-dark错误，我的SCSS代码如下：

@import "Documents/bootstrap-5.3.0-alpha2/scss/_functions.scss";
@import "Documents/bootstrap-5.3.0-alpha2/scss/_variables.scss";

@each $color , $value in $grays {
    .bg-#{$color} {
        background-color: $value;
    }
}

@import "Documents/bootstrap-5.3.0-alpha2/scss/_maps.scss";
@import "Documents/bootstrap-5.3.0-alpha2/scss/_mixins.scss";
@import "Documents/bootstrap-5.3.0-alpha2/scss/_root.scss";

我尝试调整_functions.scss和_variables.scss的导入顺序，但问题仍未解决。

解决方案 #

• Bootstrap的SCSS文件有严格的依赖顺序，_maps.scss必须在_variables.scss之前导入——因为$primary-text-emphasis-dark这类变量依赖_maps.scss中定义的主题地图数据，提前导入地图文件才能让变量正确解析。
• 修改后的正确导入顺序：

  @import "Documents/bootstrap-5.3.0-alpha2/scss/_functions.scss";
  @import "Documents/bootstrap-5.3.0-alpha2/scss/_maps.scss";
  @import "Documents/bootstrap-5.3.0-alpha2/scss/_variables.scss";
  
  @each $color , $value in $grays {
      .bg-#{$color} {
          background-color: $value;
      }
  }
  
  @import "Documents/bootstrap-5.3.0-alpha2/scss/_mixins.scss";
  @import "Documents/bootstrap-5.3.0-alpha2/scss/_root.scss";
  

• 额外建议：如果不需要大量自定义Bootstrap基础文件，直接导入Bootstrap的主入口文件bootstrap.scss即可，它已经预设了所有文件的正确导入顺序，能避免手动导入的依赖错误。

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