Laravel Mix与Bootstrap 4 [英] Laravel Mix with Bootstrap 4
本文介绍了Laravel Mix与Bootstrap 4的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我一直在学习Laravel(8),并享受与TailWincss一起工作的乐趣。也就是说,我仍然希望使用Bootstrap来做一些事情。我在查找有关如何在laravel 8中使用laravel Mix设置引导的文档时遇到了问题。更具体地说,在resources/css/app.css
文件中,我们为顺风设置了以下内容:
@tailwind base;
@tailwind components;
@tailwind utilities;
但我不确定引导将在此处显示什么内容。
我注意到较旧版本的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>
如果要自定义引导,请将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/
的有用文档Laracast也很有帮助。
这篇关于Laravel Mix与Bootstrap 4的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文