复制Bootstrap变量到custom.scss时出现语法错误的问题咨询

两个写法问题，一个直接触发语法错误，一个会导致主题配置失效：

• 直接触发报错的问题：_custom.scss里的Bootstrap导入语句末尾漏写了分号，SASS解析时会把下一行的$white识别为导入语句的后续内容，所以才会在$white的位置抛出「expected ";"」的错误，不是后面的变量写法有问题。
• 配置逻辑错误：Bootstrap自定义主题要求所有覆盖用的变量必须写在Bootstrap核心文件导入语句之前，你现在先导入Bootstrap再定义变量，这些颜色值会被Bootstrap内置的默认变量覆盖，就算修了语法错误，自定义主题也不会生效。

调整代码顺序，给导入语句补全分号即可，修正后的_custom.scss参考代码：

// 自定义主题变量（必须放在Bootstrap导入前）
$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

// 导入Bootstrap V5
@import "../node_modules/bootstrap/scss/bootstrap.scss";

如果你的项目全局用@use做模块加载，也可以把导入语句替换为@use "../node_modules/bootstrap/scss/bootstrap.scss";，变量必须前置的规则不变，不会再触发报错。

你对照教程操作仍然报错，大概率是讲师写代码时自动补全了分号、默认把变量放在了导入前，没有特意把这个细节点出来，不需要额外做其他特殊配置。

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