如何在Laravel 5.4中使用bootstrap 4？

Question

我在laravel应用程序上使用npm安装了bootstrap 4.但我认为bootstrap 3在后面工作而不是bootstrap 4.
使用命令:

npm安装

npm install bootstrap@4.0.0-alpha.6

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

Answer 1

您必须手动将链接更改为bootstrap resources/assets/sass/app.scss.你会看到这一行

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

用...来代替

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

Answer 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');

• 把在javascript通过编辑webpack.mix.js.

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.

资源