如何将Bootstrap 4.6.2的SCSS变量导出为CSS文件用于Figma？

报错原因 #

直接单独编译_variables.scss会失败，因为这个文件里大量使用了Bootstrap内置的函数（比如theme-color）和依赖变量，这些函数和变量的定义不在_variables.scss本身，Sass找不到对应的实现，就会抛出$color: theme-color("primary") is not a color这类错误。

解决方案（新手友好版） #

你需要基于完整的Bootstrap源码来编译，步骤如下：

1. 下载完整的Bootstrap 4.6.2源码包，确保scss文件夹下包含_functions.scss、_variables.scss等所有Bootstrap核心SCSS文件。
2. 在scss文件夹内新建一个自定义入口文件，比如命名为export-vars.scss。
3. 在export-vars.scss中写入以下代码：

   // 先引入Bootstrap的函数定义和变量文件，解决依赖问题
   @import "functions";
   @import "variables";
   
   // 将Sass变量导出为CSS自定义属性（Figma能识别的格式）
   :root {
     // 导出主题色变量
     @each $color-name, $color-value in $theme-colors {
       --bs-#{$color-name}: #{$color-value};
     }
     // 导出链接相关变量
     --bs-link-color: #{$link-color};
     --bs-link-hover-color: #{$link-hover-color};
     // 如果你需要导出所有变量，可以添加这个循环（需要Sass 3.7及以上版本）
     @each $var-name, $var-value in $variables {
       --bs-#{$var-name}: #{$var-value};
     }
   }
   

4. 打开终端，进入scss文件夹所在目录，执行编译命令：

   sass export-vars.scss export-vars.css
   

5. 编译完成后，export-vars.css文件里会包含所有Bootstrap变量对应的CSS自定义属性，直接导入Figma即可使用。

为什么不推荐手动修改_variables.scss？ #

如果尝试直接替换theme-color("primary")这类内容为具体颜色值，你需要修改上百个依赖项，不仅繁琐，还容易遗漏变量关联，导致导出的变量不完整。用完整源码编译的方式能保证所有变量的正确性和完整性。

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