logo标签列表

如何在vue.js的欢迎组件中使用Bootstrap代替Tailwind CSS

javascriptlaravellaravel-mixinertiajsjetstream
8

我将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';

image

需要使用Bootstrap v5吗？还是v4可以？ - Andrew
@Andrew bootstrap v5 - ORHAN ERDAY
4个回答
7

一个潜在的解决方案是同时使用两个css框架。

你可以使用 npm install bootstrap@next 来导入和使用Bootstrap 5（更多详情请参考：https://5balloons.info/setting-up-bootstrap-5-workflow-using-laravel-mix-webpack/）。

然后为了避免类名冲突，你可以为你的Tailwind类设置一个前缀；在 tailwind.config.js 中，你可以通过设置prefix选项来添加 tw- 前缀（更多详情请参考：https://tailwindcss.com/docs/configuration#prefix）：

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

您需要花费一些功夫使用前缀更新现有的Tailwind类，但这样做可以生效。

2
下面这个在线工具可以为Tailwind类应用前缀 https://github.vue.tailwind-prefix.cbass.dev/ 。你需要复制/粘贴每个文件，但这比手动添加前缀要好。 - stacky
0
谢谢，但我想在Jetstream中使用Tailwind Css。 - ORHAN ERDAY
-2
阅读您自己的问题。“使用Bootstrap而不是Tailwind CSS”。我并没有说要删除tailwindcss。您可以将它们一起使用。 - Yolan Mees
你现在面临什么问题，无法将它们一起使用？ - Yolan Mees
Tailwind CSS和Bootstrap有重叠。我正在使用Jetstream，它可以帮助应用程序的登录、注册、电子邮件验证、双因素身份验证、会话管理、通过Laravel Sanctum进行API等功能。因此，Laravel Jetstream在前端使用Tailwind CSS，而我只想在我的Welcome.vue组件中使用Bootstrap。希望你能理解。 - ORHAN ERDAY
1
Jetstream是为了与Tailwind一起使用而构建的。如果您想删除它，您应该重新构建所有视图以使用Bootstrap。将Tailwind CSS和Bootstrap组合在一起并不是一个好主意，但它可以工作。 - Yolan Mees
让我们在聊天中继续这个讨论。 - ORHAN ERDAY
-2

尽管 Laravel 8 默认带有 Tailwind，但我们仍然可以为应用程序使用 Bootstrap 或类似的 CSS 框架。

导航到项目文件夹并安装最新版本的laravel/ui包

composer require laravel/ui

然后安装Bootstrap：

php artisan ui bootstrap

执行以下命令以使用Bootstrap 安装身份验证脚手架：

php artisan ui bootstrap --auth

然后从npm安装bootstrap包及其依赖项：
 npm install

 #development
 npm run dev 

 #production
 npm run production

上述命令将从resources/js和resources/sass文件夹编译CSS和JavaScript文件到公共文件夹。

自动化sass和js更改：

 npm run watch

现在我们可以定义js和css路径，并在blade模板中使用Bootstrap：

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>
    <h1>Tutorial made by Positronx.io</h1>
</body>
</html>

希望这对你有用！！
2
这篇文章很好地介绍了如何安装Bootstrap，但OP提到他们需要特定的Bootstrap v5版本。laravel/ui自带Bootrap v4。他们还想在应用程序的不同部分中同时使用Tailwind和Bootstrap（特别是在welcome.vue组件中使用Bootstrap v5，在其他地方使用Tailwind），我认为你的解决方案是针对使用其中一个（否则会有重叠的类名）。 - Andrew
我会为Bootstrap 5进行修改，感谢指出问题。 - Ankit Jindal
我同意Andrew的观点，不幸的是这并不是一个解决方案，我只是想在我的Welcome.vue组件中使用bootstrap。 - ORHAN ERDAY
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接