如何使用 vue v3 项目将 bootstrap v5 (js + css) 导入 nuxt.js v2.14？

Question

截至今天，bootstrap-vue 不支持 vue v3 和 bootstrap v5。

我只想将引导文件导入到 nuxt v2.14 项目中。谁能给我一个具体的例子如何做到这一点？

由于我一周前刚开始使用 vue/nuxt，我希望能在这一点上提供帮助。

附：强调 CSS 和 JS。

Answer 1

当我使用 npm 安装 bootstrap 5 时，我不想以与接受的答案相同的方式执行此操作，所以这可能对某人有所帮助：

-关于css： 我习惯使用 scss，所以我安装了 sass loader：

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

接下来在 assets 文件夹中，我创建了一个 scss 文件夹，里面有一个 main.scss 文件。在此文件中，您可以导入引导 css（就像您甚至可以覆盖引导变量一样，如果您想这样做，请不要忘记导入它们）：

@import "~bootstrap";

然后在 nuxt.config.js 我添加了这个：

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

-js部分是最棘手的，但最终完美运行：

在插件文件夹中，只需创建一个名为 bootstrap.js 的文件 只需在里面添加一个导入：

import bootstrap from 'bootstrap'

然后在你的 nuxt.config.js 中：

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

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

享受:)

编辑：我写这篇文章时的 nuxt js 版本：2.15.3 和 bootstrap 5 :)

Answer 2

下载后在bootstrap文件夹下的assets目录中添加bootstrap 5 css和js文件，然后配置你的nuxt.config.js：

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