在 Nuxt 3 和 Vite 中集成 bootsrap 5

Question

我正在尝试将 Bootstrap 5 集成到一个新的 Nuxt 3 项目中，但我遇到了一个我无法解决的问题：我想通过仅导入必要的模块（scss 和 javascript）来优化它，如下所述：https ://getbootstrap.com/docs/5.0/customize/optimize/.

我成功导入了样式，但是我找不到合适的方法来导入必要的js。我在

bootstrap.js

目录中创建了一个

public

文件，如下所示：

// import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
// import 'bootstrap/js/dist/carousel';
import 'bootstrap/js/dist/collapse';
import 'bootstrap/js/dist/dropdown';
// import 'bootstrap/js/dist/modal';
// import 'bootstrap/js/dist/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

并在 nuxt.config.ts 的 meta 部分添加了这个文件，以确保在我的页面的 head 部分调用该文件，以便 javascript 随处可用

meta: {
    script: [
        { src: 'js/bootstrap.js' }
    ],
}

但我一直有错误：

未捕获的语法错误：无法在模块外使用导入语句

我知道这是因为 Vite 不编译它，但我不知道如何让它这样做..有人知道怎么做吗？谢谢！

Answer 1

纱线添加引导程序
创建 plugins/useBootstrap.client.ts 文件并粘贴以下代码

import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.provide('bootstrap', bootstrap)
})

运行此命令yarn add --dev sass sass-loader@latest
创建 assets/styles/main.scss 文件并粘贴以下代码

@import "bootstrap/scss/bootstrap";

在nuxt.config.ts中添加如下代码

export default defineNuxtConfig({
    css: ['~/assets/styles/main.scss'],
})

如果你想使用依赖于 js 的内容，如下拉菜单、模态框，那么你必须安装 yarn add --dev @popperjs/core 或 npm install --save @popperjs/core

注意： 可以在main.scss文件中自定义bootstrap

Answer 2

如果你还没有解决，试试这个方法。它对我有用。

安装 bootstrap5

yarn add bootstrap

更改 nuxt 配置设置 (nuxt.config.ts)

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ["bootstrap/dist/css/bootstrap.min.css"], // add
  vite: {
    define: {
      "process.env.DEBUG": false,
    },
  },
});

查看是否应用了样式。 (app.vue)

<template>
  <div class="m-5">
    <!-- <NuxtPage /> -->
    <div class="btn btn-success">Success</div>
    <div class="btn btn-danger">Danger</div>
    <div class="btn btn-warning">Warning</div>
  </div>
</template>

Answer 3

安装引导程序，
```
npm install bootstrap
```

配置

nuxt.config.ts

,

export default defineNuxtConfig({
  css: [
    'bootstrap/dist/css/bootstrap.min.css'
  ],
  script: [
    {
      src: 'bootstrap/dist/js/bootstrap.bundle.min.js'
    }
  ],
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})

Answer 4

您可以在客户端项目中导入必要的bootstrap js。

plugins/bootstrap.client.ts

import { Modal } from "bootstrap";

export default defineNuxtPlugin(() => ({
  provide: {
    bootstrap: {
      Modal,
    },
  },
}));

app.vue

<template>
  <div>
    <button class="btn btn-primary" @click="toggle()">toggle modal</button>
    <div class="modal fade" id="modal-main">
      <div class="modal-dialog modal-dialog-centered" style="max-width: 600px">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Hello world!</h5>
            <button
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body p-4">Hello bootstrap and nuxt</div>
          <div class="modal-footer">
            <button class="btn btn-outline-secondary" data-bs-dismiss="modal">
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Modal } from "bootstrap";
const { $bootstrap } = useNuxtApp();

let modal: Modal;
onMounted(() => {
  modal = new $bootstrap.Modal(document.getElementById("modal-main"));
});

const toggle = () => {
  modal.toggle();
};
</script>

这是一个示例项目，仅包含引导模式所需的样式和js，首屏加载时约60KB。

https://github.com/Debonex/samples/tree/master/nuxt3-bootstrap5

Answer 5

这是一个使用 bootstrap5 和 Nuxtjs3（css 和 js）的示例，不需要 popper，因为包含在 Bundle 中（已测试）并且不再需要 Jquery。

yarn install bootstrap5

然后在plugins目录下创建文件

“useBootstrap.client.ts”

import * as bootstrap from 'bootstrap'

export default defineNuxtPlugin(() => {
    return {
        provide: {
            bootstrap: bootstrap
        }
    }
})

然后你可以在 scss 文件中或直接在（我都做了）中导入 css

“nuxt.config.ts”

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    css: ["bootstrap/dist/css/bootstrap.min.css","~/assets/styles/main.scss"],
    
})

你可以直接添加组件、模态、下拉等，如果你想排除一些导入，在插件文件中做。

Answer 6

export default defineNuxtConfig({
  css: ["bootstrap/dist/css/bootstrap.min.css"], // add
  vite: {
    define: {
      "process.env.DEBUG": false,
    },
  },

  app: {
    head: {
      script: [
        {
          src: "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js",
          type: "text/javascript",
        },
      ],
    },
  },
});

请将此代码复制到文件 nuxt.config.ts

Answer 7

如果您正在制作原型并想要包含 CDN，请在您的

nuxt.config.ts

中尝试这个

export default defineNuxtConfig({
    app: {
        head: {
            link: [
                {
                    rel: 'stylesheet',
                    href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
                    integrity: 'sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD',
                    crossorigin: 'anonymous'
                }
            ],
            script: [
                {
                    src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',
                    integrity: 'sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN',
                    crossorigin: 'anonymous'
                }
            ],
        }
    }
})

Answer 8

分享和投票

将 cdn 与 app head 结合使用

  

      app: {
            head: {
       
              link: [
                {
                  rel: "stylesheet",
                  href: "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
                  integrity: "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD",
                  crossorigin: "anonymous"
                }
              ],
              script: [
                {
                  src: "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
                  integrity: "sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3",
                  crossorigin: "anonymous"
                },
                {
                  src: "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js",
                  integrity: "sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD",
                  crossorigin: "anonymous"
                }
              ]
        
            },
          },

或将 css 和 js bootstrap 下载到 public 文件夹/bootstrap 并在 head 中使用。

 

app: {
    head: {
      title: 'My awesome project', // Other meta information
      link:[
        {
          rel: "stylesheet",
          href: "bootstrap/bootstrap.min.css",
        }
      ],
      script: [
        {
          src: "bootstrap/popper.min.js",
          crossorigin: "anonymous"
        },
        {
          src: "bootstrap/bootstrap.min.js",
          crossorigin: "anonymous"
        }
      ]

    }
 }

Answer 9

似乎仍然有很多人无法让 bootstrap 5 在 Nuxt 3 中运行，所以这里首先作为参考的是一个启动项目，它已经全部运行：

https://github.com/maxvanweenen/Nuxt-3-bootstrap-5-starter

大多数人都能使用 bootstrap 5 css，但 JS 不行。让这个工作最重要的一步是在你的安装中包括 bootstrap 和 Popper：

npm i --save bootstrap @popperjs/core

然后通过在项目的根目录中创建一个“plugins”目录并添加一个类似“useBootstrap.client.ts”的文件将其注册为插件（“client”部分将告诉 Nuxt 不要在服务器端使用它).

// useBootstrap.client.ts    
import * as bootstrap from 'bootstrap'

export default defineNuxtPlugin(() => {
    return {
        provide: {
            bootstrap: bootstrap
        }
    }
})

现在你只需要将css添加到nuxt配置中：

export default defineNuxtConfig({
css: [
    '~/assets/scss/main.scss'
]

})

并在 assets/scss 中创建一个 main.scss。

一些额外的重要信息：

bootstrap 文档中没有提到 fibers 的安装，但是在安装 fibers 时会自动启用与 sass 的同步编译（速度提高 2 倍）。所以建议运行：

npm install fibers

此外，如果您想在此设置中自定义或添加主题颜色，您可以这样做：

// set theme colors
$primary: #ce2127;
$dark: #212121;
$theme1: #33a8d1;

// add custom colors to the bootstrap theme
$custom-theme-colors: (
        "theme1": $theme1,
        "white": $white
);

// fix for bootstrap transposing colors
$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

如果有人在这之后让它运行仍然有任何问题，请告诉我！

在 Nuxt 3 和 Vite 中集成 bootsrap 5

问题描述投票：0回答：9

9个回答

最新问题

在 Nuxt 3 和 Vite 中集成 bootsrap 5

问题描述 投票：0回答：9

9个回答

最新问题

问题描述投票：0回答：9