时间戳

首页 > 解决方案 > Laravel 与 Bootstrap 4 混合

laravel - Laravel 与 Bootstrap 4 混合

问题描述

我一直在学习 Laravel (8) 并且喜欢使用 tailwindcss。也就是说，有些事情我仍然希望使用 Bootstrap。我无法找到有关如何在 laravel 8 中使用 laravel mix 设置引导程序的文档。更具体地说，在resources/css/app.css文件中，我们将以下内容用于顺风：

@tailwind base;
@tailwind components;
@tailwind utilities;

但我不确定引导程序会在这里做什么。

我注意到使用了旧版本的 laravel php artisan ui bootstrap，但据我所见，这在 Laravel 8 中不可用。

标签： laravelbootstrap-4laravel-8laravel-mix

解决方案

跑：npm install --save-dev bootstrap jquery popper.js

你webpack.mix.js应该怎么看：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css');

你app.scss应该怎么看：

@import '~bootstrap/scss/bootstrap';

你app.js应该怎么看：

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

这是您可以在文件中使用生成文件的方式.blade.php：

<link rel="stylesheet" href="{{ mix('css/app.css') }}" type="text/css">
<script src="{{ mix('js/app.js') }}"></script>

如果您想自定义 Bootstrap，请复制node_modules/bootstrap/scss/_variables.scss到resources/sass/_variables.scss，更改您想要的变量并将您的更改app.scss为：

@import '~bootstrap/scss/functions';
@import 'variables';
@import '~bootstrap/scss/bootstrap';

您在https://getbootstrap.com/docs/4.0/getting-started/webpack/上有一些有用的文档

Laracasts 也很有帮助。

推荐阅读