如何在 Laravel 5.4 中使用 bootstrap 4？

How to use bootstrap 4 in Laravel 5.4?

提问by unreleased

I installed bootstrap 4 using npm on my laravel app. But I think bootstrap 3 working behind not bootstrap 4.
using command:

我在 Laravel 应用程序上使用 npm 安装了 bootstrap 4。但我认为引导程序 3 在后面工作而不是引导程序 4。
使用命令：

npm install

安装

npm install [email protected]

npm install [email protected]

Did I left something to do? Or do I need to manually import bootstrap to assets/sass/app.scss file or else?

我有事要做吗？或者我是否需要手动将引导程序导入到 assets/sass/app.scss 文件中？

回答by EddyTheDove

You have to manually change the link to bootstrap from resources/assets/sass/app.scss. You will see this line

您必须手动更改从resources/assets/sass/app.scss. 你会看到这一行

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

Replace with

用。。。来代替

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

回答by Rahul

Do flowing with new or empty Laravelproject.

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

• remove the bootstrap entry from package.jsonand replace it with "bootstrap": "4.0.0-alpha.6".
• In resources/assets/sass/app.scss, commentout the importof variables.
• Change the path of bootstrap to @import "node_modules/bootstrap/scss/bootstrap.scss";

• In resources/assets/js/bootstrap.js, look for require('bootsrap-sass');and change it to require('bootstrap');

• Bring in the javascriptby editing the webpack.mix.js.

• 从中删除引导程序条目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');

• 在把javascript通过编辑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. */

• run $ npm install

• Check node_modulesfolder for bootstrapand jqueryis install properly. If not install then install manually.

• For bootstrap4 $ npm install [email protected]

• For jquery $ npm install jquery

• 跑 $ npm install

• 检查node_modules文件夹bootstrap并jquery正确安装。如果没有安装则手动安装。

• 对于 bootstrap4 $ npm install [email protected]

• 对于jQuery $ npm install jquery

If all goes well, you should be able to run npm run dev.

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

Note: If you need tether.jsthen use cdnor install manually. Because bootstrap@4required tether.jsfor tooltip.

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

Source

来源

回答by OpSocket

You need to comment out the @import "variables";line from resources/assets/sass/app.scss

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

The import directive is called 2 times, one in app.scssand then in the bootstrap.scss file from the installation directory

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