如何在nuxtjs中集成bootstrap 5?

1zmg4dgp  于 2023-05-11  发布在  Bootstrap
关注(0)|答案(1)|浏览(475)

首先,我尝试集成bootstrap-vue,但它支持bootstrap 4,更糟糕的是vue 2。因此,我尝试按照以下步骤集成bootstrap 5而不做任何更改:
1.安装bootstrap包(通过npm)。
1.因此,我将编辑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文件。我不明白为什么,但没有动画作品,从下拉菜单开始,旋转木马。

x9ybnkn6

x9ybnkn61#

我遵循了一些旧的StackOverflow答案,并设法(我认为)使用最新的Nuxt 3和Bootstrap 5创建了工作演示,如下所示:
https://stackblitz.com/edit/github-bebg1r-j6lqxm
关键的事情:
1.在package.json中添加并安装bootstrapsasssass-loader的依赖项
1.在包含@import 'bootstrap/scss/bootstrap';/assets文件夹中创建.scss文件
1.通过css: ['~/assets/main.scss']nuxt.config.ts中加载此文件

  1. /plugins/bootstrap.client.ts中加载JS包的插件

相关问题