我一直在学习 Laravel (8) 并且喜欢使用 tailwindcss。也就是说,我仍然希望使用 Bootstrap 做一些事情。我无法找到有关如何在 laravel 8 中使用 laravel mix 设置 bootstrap 的文档。更具体地说,在 resources/css/app.css
中文件中,我们为顺风添加了以下内容:
@tailwind base;
@tailwind components;
@tailwind utilities;
但我不确定这里会有什么 bootstrap 。我注意到使用了旧版本的 laravel
php artisan ui bootstrap
但从我所见,这在 Laravel 8 中是不可用的。
最佳答案
运行: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 也很有帮助。
关于Laravel 与 Bootstrap 4 的混合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65197085/