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

Question

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

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

由于我一周前才开始使用 vue/nuxt，因此我非常感谢此时的帮助。

PS 强调 CSS和JS。

Answer 1

当我使用 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'}
],

不要忘记模式：“客户端”，如果没有，您将因服务器端渲染而收到“文档未定义”错误。

享受 ：）

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

Answer 2

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

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