Laravel 与 Bootstrap 4 混合

Posted 2023-03-14

【中文标题】Laravel 与 Bootstrap 4 混合

【英文标题】：Laravel Mix with Bootstrap 4

【发布时间】：2021-03-19 15:59:01

【问题描述】：

我一直在学习 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 中不可用。

【参考方案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 应该是什么样子：

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

【参考方案2】：

似乎在 Laravel v8.24.0 中可用。

请注意，执行此过程会重新生成 webpack.mix.js。

步骤是：

安装 laravel ui：composer require laravel/ui 生成脚手架：php artisan ui bootstrap 可选地为身份验证生成相同的：php artisan ui bootstrap --auth 使 npm 安装所需的包：npm install 编译资产：npm run dev 或 npm run production（用于开发或生产）

然后确保在刀片模板中包含以下内容：

<!-- Scripts -->
<script src=" asset('js/app.js') " defer></script>

<!-- Styles -->
<link href=" asset('css/app.css') " rel="stylesheet">

【讨论】：

谢谢兄弟，我只创建了一个项目，但在我没有使用引导程序安装 laravel ui 之前。使用 sass-loader v.10。使用 sass-loader 11 存在问题

【参考方案3】：

使用此步骤

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

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

@import "bootstrap";

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

import "bootstrap";

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

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

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

现在你可以运行你的命令了

npm run dev

现在我们有了包含 Bootstrap 的 /public/css/app.css 和 /public/js/app.js 文件，我们可以通过 Laravel 的资产助手 () 将它们包含在页面（模板 Blade）中以使用引导组件

在你的头上

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

在你的页脚

<script src=" asset('js/app.js') "></script>

现在我认为他会喜欢工作