Laravel 5.1和Bootstrap 3 Sass设置

时间:2015-07-08 16:20:03

标签: twitter-bootstrap laravel twitter-bootstrap-3 laravel-5

我想在Laravel 5.1中使用Bootstrap 3 Sass,但我有一些问题:

  • 在5.1中,在Laravel的package.json文件中,开箱即用 " bootstrap-sass":" ^ 3.0.0"的依赖关系。有一个简单的方法 然后用Laravel 5.1设置bootstrap sass?
  • 我需要拉入引导源,还是应该链接到 CDN或将文件放在我的公共文件夹中?
  • 有没有理由使用Bootstrap的源代码,而不是 把它放在公共文件夹中?
  • 我认为我需要安装bootstrap是正确的 通过Bower,将fonts文件夹内容移动到公共文件夹, 然后设置Elixir将所有Sass文件混合在一起?

我对将Bootstrap等第三方前端服务集成到Laravel感到困惑。我是Laravel和Bootstrap的新手,所以任何信息或建议都会受到赞赏。

注意:我已经在线完成了大量的研究,但Laravel和Bootstrap的教程已过时,评论显示它们无法正常工作。

感谢您的时间。

1 个答案:

答案 0 :(得分:4)

首先安装节点包只需在文件夹中运行npm install

之后如果您导航到resources/assets/sass/app.scss,您将看到第一个注释行从通过package.json安装的节点模块导入整个引导程序

在您gulpfile.js默认情况下,您已经取消注释了您已经拥有elixir命令来编译应用程序sass文件的行。

使用所有设置只需运行gulp,elixir将编译导入bootstrap的sass文件,您将在public/css/app.css中看到可以在应用程序中链接的输出。

最后要复制字体或任何其他资产,您可以使用copy命令,并将字体复制到公用文件夹。

elixir(function(mix) {
    mix.copy('node_modules/bootstrap-sass/assets/fonts/', 'public/fonts');
    mix.sass('app.scss'); 
}