javascript - 如何在 vue.js 欢迎组件中使用 Bootstrap 而不是尾风 CSS

Question

我将 jetstream+inertia.js 安装到我的 laravel 项目中，一切正常，但我只需要在 welcome. vue 中使用 bootstrap 5组件那么我该如何处理呢？
我的 app.js文件;

require('./bootstrap');

// Import modules...
import {createApp, h} from 'vue';
import {App as InertiaApp, plugin as InertiaPlugin} from '@inertiajs/inertia-vue3';
import 'animate.css';
import Toaster from '@meforma/vue-toaster';
import 'alpinejs';



const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({methods: {route}})
    .use(InertiaPlugin)
    .use(Toaster)
    .mount(el);

我的 app.css文件:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Answer 1

一个潜在的解决方案是同时使用这两个 css 框架。
您可以使用 npm install bootstrap@next 导入和使用 Bootstrap 5 (更多详情:https://5balloons.info/setting-up-bootstrap-5-workflow-using-laravel-mix-webpack/)。
然后为避免类名冲突，您可以为 Tailwind 类设置前缀；在 tailwind.config.js您可以添加 tw-通过设置前缀选项来添加前缀(更多详细信息:https://tailwindcss.com/docs/configuration#prefix):

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
}

您将需要做一些工作来更新带有前缀的现有 Tailwind 类，但它会起作用。