SCSS转CSS失败求助：提取Bootstrap颜色变量遇异常

为什么你之前的操作会生成空文件？ #

得先说明白：Sass 默认不会把未被引用的变量输出到编译后的 CSS 文件里。你单独提取的颜色 SCSS 文件里只有变量定义，没有任何使用这些变量的样式代码，所以编译后自然是空文件——这是 Sass 的正常行为，不是工具或命令出了问题。

快速提取颜色的几种方法 #

方法1：手动提取（最直接高效）

直接打开 Bootstrap 的 _variables.scss 文件，找到颜色定义区域（要么是 $colors 映射集合，要么是单个独立的颜色变量，比如 $blue: #0d6efd !default;），直接复制里面的十六进制代码就行。Bootstrap 的颜色变量命名很清晰，找起来毫无难度。

方法2：修改 SCSS 文件强制批量输出颜色

如果需要批量导出所有颜色到 CSS 文件，可以在你的颜色 SCSS 文件末尾加一段代码，让 Sass 把颜色变量转换成 CSS 自定义属性，这样编译后就能看到所有颜色值：

1. 把 Bootstrap 里的颜色变量（或者 $colors 映射）复制到你的 colours.scss 里，示例：

// Bootstrap 颜色映射示例
$colors: (
  "blue": #0d6efd,
  "indigo": #6610f2,
  "purple": #6f42c1,
  "pink": #d63384,
  "red": #dc3545,
  // ...其他颜色
) !default;

2. 在文件末尾添加这段遍历输出的代码：

:root {
  @each $color-key, $color-value in $colors {
    --bs-color-#{$color-key}: #{$color-value};
  }
}

3. 再用命令行编译：

sass colours.scss colours.css

编译后的 CSS 文件里就会有 :root 下的所有颜色变量，包含你需要的十六进制代码。

方法3：解决完整 _variables.scss 的报错问题

你编译完整 _variables.scss 时报错，是因为 negativify-map 是 Bootstrap 自定义的函数，这个函数在 _functions.scss 文件里定义，单独编译 _variables.scss 时找不到这个函数，所以触发错误。如果一定要编译完整文件，你需要：

• 把 Bootstrap 的 _functions.scss 和 _variables.scss 放在同一个目录
• 在 _variables.scss 开头引入函数文件：@import "functions";
  不过其实完全没必要这么折腾，因为我们只需要颜色，用前面两种方法更高效。

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