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也很有帮助。