如何导入bootstrap v5 (js + css)到next .js v2.14与vue v3项目?

Question

截至目前，boot -vue不支持vue v3和bootstrap v5.

我只想要导入引导文件到next v2.14项目。谁能给我一个具体的例子，如何做到这一点?

由于我一周前才开始使用vue/next，我希望在这一点上得到帮助。

注:强调CSS和JS .

Answer 1

当我用npm安装bootstrap 5时，我不想用与接受的答案相同的方式来做，所以也许这将对其他人有帮助:

——css:我习惯使用sass，所以我安装了sass加载器:

npm install --save-dev sass sass-loader@10 fibers

接下来，在assets文件夹中，我创建了一个带有main的scss文件夹。内部的SCSS文件。在这个文件中，你可以导入bootstrap css(这样你甚至可以覆盖bootstrap变量，如果你想这样做，不要忘记导入它们):

@import "~bootstrap";

然后在next .config.js中我添加了这个:

css: [
'~/assets/scss/main.scss'
],

- js部分是最棘手的，但最终它的工作完美:

在plugins文件夹中，创建一个名为bootstrap.js的文件只需在里面添加一个import:

import bootstrap from 'bootstrap'

在next .config.js中:

plugins: [
{src: '~/plugins/bootstrap.js', mode: 'client'}
],

不要忘记mode:'client'，否则你会因为服务器端渲染而得到'document is not defined'错误。

享受:)

编辑:我写这篇文章时的下一个js版本:2.15.3和bootstrap 5:)

Answer 2

将bootstrap 5的css和js文件下载到文件夹bootstrap下的assets目录中，然后配置你的nuxt.config.js:

export default {
...
css: ['~/assets/bootstrap/bootstrap.min.css'],
script: [
{
src: "~/assets/bootstrap/bootstrap.bundle.min.js",
type: "text/javascript"
}
]
...
}