问 如何将Bootstrap5和Nuxt3结合使用？

EN

变体1. 将其添加到 nuxt.config.ts 中

import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', integrity: 'sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor', crossorigin: 'anonymous' }
      script: [
        { src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', integrity: 'sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2', crossorigin: 'anonymous' }
})

缺点:需要手动版本控制，您不能使用SASS功能。

变体2.

1. 在@popperjs/core旁边安装引导程序

yarn add bootstrap @popperjs/core

1. 创建 plugins/useBootstrap.client.ts 文件

import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'
export default defineNuxtPlugin(nuxtApp => {