如何在 Laravel 5.1 中使用 Laravel Elixir 集成安装 Bootstrap

2025-05-04 20:24:17
推荐回答(1个)
回答1:

1、安装NPM依赖
Bootstrap和Elixir都是可以通过NPM(node包管理器)安装的node包,如果你打开默认的package.json,可以看到起内容如下:

{ "private": true, "devDependencies": { "gulp": "^3.8.8" }, "dependencies": { "laravel-elixir": "^3.0.0", "bootstrap-sass": "^3.0.0" } }
在命令行中,运行npm install,这样这两个包及其依赖都会被安装。其实该过程就类似使用Composer安装PHP依赖,原理是一样的。

npm install执行完成后,你会发现项目根目录下新增了一个node_modules文件夹,在该文件夹下包含了刚刚安装的两个包。

2、Bootstrap Sass
现在在Laravel项目集成Bootstrap非常简单。打开resources/assets/sass/app.scss,取消下面这行前面的注释:

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
保存修改并运行gulp,然后就会生成所有你需要的Bootstrap样式文件。

3、自定义Bootstrap样式
如果你不喜欢Bootstrap默认的样式,还可以通过重写相应变量实现自定义。作为示例,这里我们简单将默认Bootstrap默认字体由Google Fonts改成 Lato。

再次打开resources/assets/sass/app.scss,导入字体并修改字体: