仅引入Bootstrap4 Modal组件时过渡效果失效该如何解决？

核心问题 #

导致过渡动画失效有两个核心原因：

• 版本不兼容：你项目中SCSS使用的是Bootstrap4源码，但是HTML中引入的Bootstrap JS是3.3.7版本，两个大版本的Modal组件动画、交互逻辑实现存在差异，无法匹配运行。
• 缺少过渡样式依赖：你自定义导入的SCSS模块中缺少过渡动画的核心依赖transitions模块，.fade类对应的过渡属性未被引入，即便JS版本正确也无法生效。

解决步骤 #

1. 替换HTML中的Bootstrap JS依赖，Bootstrap4的Modal组件依赖Popper.js，需要同步引入，将原有3.3.7版本的Bootstrap JS替换为如下代码：

<!-- 原有jQuery引用保留，新增如下两个引用替换原bootstrap 3.3.7的script -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpB31+JXLX6v2CjZ/4EeVxOR7+VrCqLc5eI6Y5oNpVwKe01B2p" crossorigin="anonymous"></script>

2. 修改mine.scss，新增过渡模块的导入，修改后完整代码如下：

// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
// 新增导入过渡动画核心模块
@import "node_modules/bootstrap/scss/transitions";
// 组件模块
@import "node_modules/bootstrap/scss/modal";
@import "node_modules/bootstrap/scss/buttons";

3. 重新执行编译命令即可生效：
   sass mine.scss mine.css

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