|
|
相关文章推荐
如何将Bootstrap5和Nuxt3结合使用？
问
如何将Bootstrap5和Nuxt3结合使用？
EN
EN
Stack Overflow用户
提问于
2022-04-08 10:04:30
回答 2
查看 1.7K
关注 0
票数 4
EN
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-06-06 21:03:47
变体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.
- 在@popperjs/core旁边安装引导程序
yarn add bootstrap @popperjs/core-
创建
plugins/useBootstrap.client.ts文件
import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'
export default defineNuxtPlugin(nuxtApp => {
推荐文章