Laravel 与 Bootstrap 4 的混合

Question

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

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

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

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

Answer 1

跑： 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应该怎么看：

@import '~bootstrap/scss/bootstrap';

这是您如何在文件中使用生成的.blade.php文件：

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

如果您想自定义 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 也很有帮助。

Answer 2

使用此步骤

\n

npm install bootstrap\nnpm install @popperjs/core\nnpm install sass@^1.32\nnpm install sass-loader\n

\n

对于 Bootstrap Sass 文件，我们在 /resources 中创建 \xe2\x80\x9cscss\xe2\x80\x9d 文件夹，然后在 /resources/scss/ 中创建一个新的 app.scss 文件。然后将以下行插入到 /ressources/scss/app.scss 文件中

\n

@import "bootstrap";\n

\n

对于 Bootstrap JavaScript，将以下行插入到 /resources/js/app.js 文件中：

\n

import "bootstrap";\n

\n

要使用 Laravel Mix 编译 Bootstrap JavaScript 和 Sass 文件，您需要编辑 /webpack.mix.js 文件，如下所示：

\n

const mix = require('laravel-mix');\n\nmix.js('resources/js/app.js', 'public/js')\n    .sass("resources/scss/app.scss", "public/css");\n

\n

现在你可以运行你的命令

\n

npm run dev\n

\n

现在我们已经有了包含 Bootstrap 的 /public/css/app.css 和 /public/js/app.js 文件，我们可以通过 Laravel 的 asset helper () 将它们包含在页面（模板 Blade）上以使用 Bootstrap 组件

\n

在你头上

\n

<link rel="stylesheet" href="{{ asset('css/app.css') }}">\n

\n

在你的页脚上

\n

<script src="{{ asset('js/app.js') }}"></script>\n

\n

现在我想他会享受工作

\n