如何在 Laravel 5.4 中使用 bootstrap 4？答案

【问题标题】：How to use bootstrap 4 in Laravel 5.4?如何在 Laravel 5.4 中使用 bootstrap 4？
【发布时间】：2017-07-15 12:47:41
【问题描述】：

我在我的 laravel 应用上使用 npm 安装了 bootstrap 4。但我认为 bootstrap 3 在 bootstrap 4 后面工作。
使用命令：

npm 安装

npm install bootstrap@4.0.0-alpha.6

我有什么事情要做吗？还是我需要手动将 bootstrap 导入 assets/sass/app.scss 文件或其他？

【问题讨论】：

它应该在public 文件夹中的某个位置。然后像往常一样在 html 中包含它，但现在在你的刀片中的某个地方
我其实不懂你。但是从assets目录编译的assets和导入bootstrap 3的那些js和css文件，这就是我认为的问题。
@unreleased 您是否更新了资产中的 Bootstrap 路径？例如在你的 Scss github.com/laravel/laravel/blob/master/resources/assets/sass/….

标签： twitter-bootstrap laravel laravel-5.4

【解决方案1】：

您必须手动将链接从resources/assets/sass/app.scss 更改为引导程序。你会看到这一行

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

替换为

@import "node_modules/bootstrap/scss/bootstrap";

【讨论】：

之前尝试过@import "node_modules/bootstrap/scss"; 并得到了一些错误。现在解决了。谢谢:)
@unreleased，你可能还想加载bootstrap4的脚本，如果你这样做了，把require(bootstrap-sass');改成require('bootstrap'); in resources/assets/js/bootstrap.js
还有npm install popper.js

【解决方案2】：

使用新的或空的 Laravel 项目进行流动。

从package.json 中删除引导条目并将其替换为 "bootstrap": "4.0.0-alpha.6"。
在resources/assets/sass/app.scss、comment 和import 的variables 之间。
将引导程序的路径更改为@import "node_modules/bootstrap/scss/bootstrap.scss";
在resources/assets/js/bootstrap.js 中，查找require('bootsrap-sass'); 并将其更改为require('bootstrap');
通过编辑webpack.mix.js 引入javascript。

JavaScript

mix.js([
    'node_modules/jquery/dist/jquery.min.js',
    'node_modules/bootstrap/dist/js/bootstrap.js',
    'resources/assets/js/app.js'], 'public/js');
mix.sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/admin.scss', 'public/css/admin'); /* If you want to make admin css file. */

运行$ npm install
检查node_modules 文件夹中的bootstrap 和jquery 是否安装正确。如果不安装，则手动安装。
对于 bootstrap4 $ npm install bootstrap@4.0.0-alpha.6
对于 jquery $ npm install jquery

如果一切顺利，你应该可以运行npm run dev。

注意：如果您需要tether.js，请使用cdn 或手动安装。因为bootstrap@4 需要tether.js 才能获得tooltip。

Source

【讨论】：

没有必要编辑 webpack.mix.js，因为 app.js 需要 bootstrap.js，而 bootstrap.js 需要 jQuery 和 Bootstrap。

【解决方案3】：

您需要将resources/assets/sass/app.scss 中的@import "variables"; 行注释掉

import 指令被调用了 2 次，一次在app.scss 中，然后在安装目录的 bootstrap.scss 文件中

【讨论】：

【解决方案4】：

1.npm 安装

2.npm install bootstrap@4.0.0-alpha.6

3.将“resources/assets/sass/app.scss”中bootstrap的路径改为@import“node_modules/bootstrap/scss/bootstrap.scss”；

4.更改 $font-size-base: 14px;在 variable.scss 到 $font-size-base:0.875 rem;

5. 在 resources/assets/js/bootstrap.js 中，查找 require('bootsrap-sass');并将其更改为 require('bootstrap');

运行 npm install 并运行 npm dev

bootstrap 4（在 app.css 中签出）将安装到您的 laravel 5.4 或更低版本，由于 laravel 5.4 或更低版本使用 bootstrap 3.4.1 版本，所有默认样式都会改变，内置的 laravel UI 也会改变。

【讨论】：