在 Laravel JetStream 中删除 Bootstrap 并安装 TailwindCSS 的正确方法

Posted 2023-03-07

【中文标题】在 Laravel JetStream 中删除 Bootstrap 并安装 TailwindCSS 的正确方法

【英文标题】：Correct way to remove Bootstrap and install TailwindCSS in Laravel JetStream

【发布时间】：2021-08-13 22:00:27

【问题描述】：

我有一个默认的 Laravel 项目，它是带有 Bootstrap 和 Vue.js 的脚手架。 考虑过使用 Laravel JetStream Livewire，我将删除 bootstrap，因为 Laravel JetStreal Livewire 使用的是 TailwindCSS，我们不能同时使用 Bootstrap 和 TailwindCSS。

"devDependencies": 
    "@tailwindcss/forms": "^0.3.1",
    "@tailwindcss/typography": "^0.4.0",
    "alpinejs": "^2.7.3",
    "axios": "^0.21",
    "bootstrap": "^4.6.0",
    "jquery": "^3.6",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "popper.js": "^1.16.1",
    "postcss": "^8.1.14",
    "postcss-import": "^14.0.1",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.32.11",
    "sass-loader": "^11.0.1",
    "tailwindcss": "^2.0.1",
    "vue": "^2.6.12",
    "vue-template-compiler": "^2.6.12"

我使用 php artisan ui boostrap 安装了 Bootstrap。

是否有任何标准方法可以删除引导程序，以便我可以在我的项目中只使用 TailwindCSS？

【参考方案1】：

bootsrtap 只添加 javascript 和 css 文件。所以首先删除库 bootsratp、jquery 和 popper.js。删除 bootsrtap 运行命令：

npm uninstall bootstrap

然后在 resources/js/bootstrap.js 中删除：

window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');

在 resources/sass/app.scss 中删除：

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

您也可以删除文件resources/sass/_variables.scss。现在运行 npm run dev/production。 如果你已经发布了它们，你也可以删除 laravel/ui 视图。 通过执行这些步骤，您的 laravel 包将不依赖于引导程序，除非引导程序是由 cdn 在某处添加的。 现在您可以添加任何其他您想要的脚手架。