首先,我尝试集成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文件。我不明白为什么,但没有动画作品,从下拉菜单开始,旋转木马。
1条答案
按热度按时间x9ybnkn61#
我遵循了一些旧的StackOverflow答案,并设法(我认为)使用最新的Nuxt 3和Bootstrap 5创建了工作演示,如下所示:
https://stackblitz.com/edit/github-bebg1r-j6lqxm
关键的事情:
1.在
package.json
中添加并安装bootstrap
、sass
和sass-loader
的依赖项1.在包含
@import 'bootstrap/scss/bootstrap';
的/assets
文件夹中创建.scss
文件1.通过
css: ['~/assets/main.scss']
在nuxt.config.ts
中加载此文件/plugins/bootstrap.client.ts
中加载JS包的插件