升级至React 18后Bootstrap出现SASS编译错误，求排查原因

• 错误和React 18无关：React版本升级不会直接影响Sass编译逻辑，问题根源在CSS预处理器与Bootstrap文件的解析冲突上。
• 核心问题：错误解析已编译的CSS文件：你的构建流程正在用node-sass编译Bootstrap的成品CSS文件（bootstrap.min.css），而非其原生Sass源文件。node-sass对现代CSS自定义属性（如--bs-navbar-toggler-icon-bg）的解析存在缺陷，会把属性值里的url()误判为未带冒号的CSS属性，从而抛出语法错误。
• 升级包无效的原因：
  • node-sass已停止维护，其版本对CSS变量中url()的写法兼容不佳，即便升级到最新版也无法解决，需替换为维护中的dart-sass（npm包名sass）。
  • 若始终编译Bootstrap的成品CSS而非源Sass，即便升级Bootstrap版本，解析冲突仍会存在。
• 可能的触发场景：React 18升级过程中，构建工具（如webpack）的配置被意外修改，导致原本被排除的node_modules目录下的CSS文件被sass-loader处理，进而触发错误。

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