Symfony6+Bootstrap SCSS项目报错：未定义变量$form-select-border-radius-sm

问题根源 #

错误提示的$form-select-border-radius-sm变量是select2-bootstrap-5-theme依赖的Bootstrap变量，问题出在两个方向：

• Bootstrap 5.3及以上版本移除了该表单组件专属变量，改用通用的$border-radius-sm变量
• SCSS文件导入顺序错误，select2主题样式先于Bootstrap变量加载，导致变量未被识别

解决方案 #

1. 修正SCSS导入顺序 #

在assets/styles/app.scss中，必须先导入Bootstrap变量，再导入select2-bootstrap-5-theme样式，示例代码：

// 1. 先导入Bootstrap核心变量
@import "../node_modules/bootstrap/scss/variables";
// 2. 再导入select2-bootstrap-5-theme完整样式
@import "../node_modules/select2-bootstrap-5-theme/src/_include-all";
// 3. 最后导入Bootstrap其余样式
@import "../node_modules/bootstrap/scss/bootstrap";

2. 适配Bootstrap 5.3+版本 #

若使用Bootstrap 5.3及以上版本，可在导入select2主题前手动定义缺失变量：

// 用Bootstrap通用变量替代已移除的组件专属变量
$form-select-border-radius-sm: $border-radius-sm;
// 导入select2-bootstrap-5-theme样式
@import "../node_modules/select2-bootstrap-5-theme/src/_include-all";

3. 升级select2-bootstrap-5-theme版本 #

若当前主题版本过旧未适配Bootstrap 5.3+，执行升级命令：

npm update select2-bootstrap-5-theme
# 或使用yarn
yarn upgrade select2-bootstrap-5-theme

4. 清理缓存并重新构建 #

完成调整后，清理缓存并重新编译前端资源：

# 清理Symfony缓存
php bin/console cache:clear
# 重新构建前端资源
npm run build
# 或yarn build

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