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

Question

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

我只想导入 bootstrap 文件到 nuxt v2.14 项目。谁能给我一个具体的例子如何实现这个？

因为我刚开始 vue/nuxt 一周前，我希望能在这一点上提供帮助。

P.S。强调CSS和JS.

Answer 1

在bootstrap文件夹下的assets目录下添加bootstrap5css和js文件，然后配置你的nuxt.config.js:

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

Answer 2

当我用 npm 安装 bootstrap 5 时，我不想按照接受的答案那样做，所以也许这对其他人有帮助：

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

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

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

@import "~bootstrap";

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

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

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

在plugins文件夹中，新建一个名为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 :)

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

How to import boostrap v5 (js + css) into nuxt.js v2.14 with vue v3 project?

vue.js

nuxt.js

vuejs3

bootstrap-5