Question

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

npm install

npm install bootstrap@4.0.0-alpha.6

我还有什么要做的吗？或者我是否需要手动导入bootstrap到assets / sass / app.scss文件，否则？

Answer 1

您必须手动将链接更改为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的{{1}}文件夹并正确安装bootstrap。如果没有安装，请手动安装。
对于bootstrap4 jquery
对于jquery $ npm install bootstrap@4.0.0-alpha.6

如果一切顺利，您应该能够运行$ npm install jquery。

注意：如果您需要npm run dev，请使用tether.js或手动安装。由于cdn bootstrap@4需要tether.js。

Source

Answer 3

您需要在@import "variables";

中注释掉resources/assets/sass/app.scss行

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

Answer 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 也会改变。

如何在Laravel 5.4中使用bootstrap 4？

4 个答案: