Bootstrap4升级为5后SASS模块无法导入变量、@extend类报错如何解决

问题原因 #

• Bootstrap 5 对工具类的生成逻辑做了重构，默认采用工具类API按需生成的模式，直接导入utilities文件不会自动输出.mt-1、.fw-bold这类实体选择器，只有显式声明要生成的工具类才会生成对应CSS，这是和Bootstrap 4最核心的差异。
• 原有导入顺序不符合Bootstrap 5的要求，必须先导入functions，再导入variables，最后导入mixins，variables内部会调用functions里的计算方法，顺序错误会导致变量和工具类生成异常。
• 全量导入Bootstrap主文件报错是因为主文件包含:root顶层变量声明，CSS Modules不允许模块文件内出现非类选择器的顶层规则，所以会触发Selector ":root" is not pure错误。

解决方法 #

按需生成所需工具类 #

在导入Bootstrap的scss文件前，先定义$utilities变量声明你需要用到的工具类配置，再按正确顺序导入基础文件即可：

// 声明需要用到的工具类配置
$utilities: (
  "margin-top": (
    property: margin-top,
    class: mt,
    values: (
      1: $spacer * 0.25
    )
  ),
  "font-weight": (
    property: font-weight,
    class: fw,
    values: (
      bold: 700
    )
  )
);
$utilities-api-enabled: false;

// 按正确顺序导入Bootstrap基础文件
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

需要使用其他工具类时，直接在$utilities对象中添加对应配置即可，完整的默认工具类配置可以参考Bootstrap源码内的_utilities.scss文件，按需复制对应项即可。

规避全量导入错误 #

如果需要使用大量Bootstrap全局样式，可以单独创建一个全局scss文件，在项目入口直接引入（不要作为CSS Modules导入），该文件内只导入Bootstrap的全局样式部分，不包含工具类，这样不会触发:root选择器的报错，工具类还是按上面的方式在各自的module.scss文件内按需配置即可。

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