如何在nuxtjs中集成bootstrap 5？

Question

首先，我尝试集成 bootstrap-vue，但它支持 bootstrap 4，甚至更糟糕的 vue2。 因此，我尝试按照以下步骤集成 Bootstrap 5，无需任何更改：

1. 我安装引导程序包（通过 npm）。
2. 所以我要编辑 nuxt.config.ts 文件，在 css 数组中添加 css 文件，并在插件条目中添加脚本。

这是最终结果：

export default defineNuxtConfig({
   plugins: [
     {
       src: "~/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
       mode: "clients",
     },
   ],
   css: [
     "~/node_modules/bootstrap/dist/css/bootstrap.min.css",
     "@/assets/css/global.css",
   ],
});

现在 css 工作正常，问题仍然出在 js 文件上。 我不明白为什么，但从下拉菜单到轮播，没有任何动画效果。

Answer 1

我遵循了一些旧的 StackOverflow 答案，并设法（我认为）使用最新的 Nuxt 3 和 Bootstrap 5 创建工作演示，如下所示：

https://stackblitz.com/edit/github-bebg1r-j6lqxm

关键事项：

1. 在

   package.json

   中添加并安装

   bootstrap

   、

   sass

   和

   sass-loader

的依赖项
2. 在包含

   .scss

    的文件夹中创建 

   /assets

    文件
   

   通过
@import 'bootstrap/scss/bootstrap';

3.  加载此文件到 

   nuxt.config.ts用于在
css: ['~/assets/main.scss']

4.  中加载 JS 包的插件
   

Answer 2