如何将Bootstrap5与Vite和Nuxt3一起使用？

Question

Tailwind 使您可以在使用 Vite 设置的项目中轻松使用其 CSS，如您在此处看到的。

但是，Bootstrap 5 仅提供可用于Webpack 的信息。

我找不到任何关于如何使用 Vite 设置 Bootstrap 5 CSS 的信息。有人对如何使用 Vite 成功且最佳地设置 Bootstrap 5 有任何建议吗？我正在使用 Nuxt3，但使用哪个框架并不重要。

Answer 1

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

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

缺点：需要手动版本控制，无法使用SASS功能。

变体 2。

1. 在 @popperjs/core 旁边安装 bootstrap

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

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

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

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

无需手动导入，因为 Nuxt3 会为您完成此操作。Bootstrap JS 应该可以通过以下方式在您的组件/页面中使用

const { $bootstrap } = useNuxtApp()

3. 创建assets/styles/main.scss文件

yarn add bootstrap @popperjs/core

4. 将其添加到nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

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