Electron项目集成Bootstrap 5无法正常生效问题求助

第一步：清理冗余依赖与冲突配置 #

• Bootstrap 5 已完全移除对jQuery的依赖，且内置了Popper用于弹出类组件交互，你额外安装的jquery、popper.js属于冗余依赖，反而可能造成版本冲突，先执行以下命令卸载：

npm uninstall jquery popper.js

• 你同时通过scss导入和HTML外链两种方式引入Bootstrap样式属于重复配置，且你填写的外链CSS路径与npm安装的依赖路径不匹配，是样式失效的核心原因，先删掉index.html head中的<link rel="stylesheet" href="./contents/bootstrap/5.0.2/css/bootstrap.min.css" />和所有jQuery、Popper相关的script标签。

第二步：正确引入Bootstrap样式 #

两种方案二选一即可，不要同时使用：

方案A：直接使用npm包内的预编译CSS（无需处理scss） #

直接在index.html的head中引入node_modules内的Bootstrap CSS，路径填写正确：

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">

方案B：使用scss自定义样式（需要配置scss编译） #

如果你需要自定义Bootstrap主题，保留你的main.scss配置，但要确保你项目的构建工具已经配置了scss编译能力，能把main.scss编译成css文件后再引入到index.html中，不要直接引入scss源文件到HTML。

第三步：正确引入Bootstrap JS #

在index.html的</body>标签前加入Bootstrap JS的引入，不要放在head中避免阻塞渲染：

<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

注：bootstrap.bundle.min.js已经内置了所需的Popper代码，不需要额外引入

第四步：Electron渲染进程配置检查 #

如果执行完以上步骤JS交互还是不生效，检查你的主进程创建BrowserWindow时的配置，开发阶段可以开启nodeIntegration和关闭contextIsolation解决require调用失效问题：

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false
  }
})

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