如何在 vue.js 欢迎组件中使用 bootstrap 而不是 tailwind 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 框架。

您可以使用 Bootstrap 5 导入和使用npm install bootstrap@next（更多详细信息：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 类，但它会起作用。