Laravel 5、引导程序和更少答案

【问题标题】：Laravel 5, Bootstrap, and LessLaravel 5、引导程序和更少
【发布时间】：2015-05-28 05:18:12
【问题描述】：

我刚刚开始使用 Laravel 5，我按照 guide 安装了 Bootstrap。这是我第一次使用 Laravel，我对响应式主题和相关技术并不熟悉。

然后我去Startbootstrap 试用 Laravel 框架中的模板之一。根据指南，我通过仅复制 HTML 为其中一个模板的顶部栏创建了一个视图，包括 http://mysite/js/bootstrap.js 和 http://mysite/css/bootstrap.css，但是当我在浏览器 (Firefox) 上呈现它时，我看到像.navbar-header 这样的类是从nav.less 加载的。我现在确实看到 Laravel 5 最初带有 Less 文件，但它们位于 public 目录之外 (mysite/resources/assets/less/bootstrap/)，因此它们没有被使用。

所以我的问题是..

我链接的那个指南给我的印象是 Bootstrap 没有随 Laravel 5 一起提供，但看起来像 Less 版本。如果我想使用 Laravel 5 附带的 Bootstrap，我应该为 mysite/resources/assets/less/bootstrap/ 的文件使用 Less 编译器吗？
浏览器中显示的路径mysite/css/less/navbar.less 在我的安装中实际上并不存在。此外，CSS 实际上来自http://mysite/css/bootstrap.css。浏览器是如何生成mysite/css/less/navbar.less的？见https://www.evernote.com/l/Ak-3I6SiUlhBd6Y_4NiX10LgrMt0vccqjiI。

【问题讨论】：

Laravel 在构建管道的 gulp 之上使用 laravel elixir。安装 npm + gulp (npm install -g gulp && npm install) 并运行 gulp watch。
@Amelia，我遵循 Laravel 文档并能够运行 Elixir/Gulp，它会生成 css/app.less。不过好像没用过？

标签： twitter-bootstrap laravel less laravel-5

【解决方案1】：

看起来 LESS 是在启用源映射的情况下编译的，而且 Chrome 启用 CSS 源映射 似乎也处于活动状态。这就是您从 LESS 文件中看到实际映射规则的原因。以下文章解释了它的工作原理以及如何禁用它：

Debug LESS with Chrome Developer Tools

在 Firefox 中，您可以在开发者工具选项中禁用 CSS 源映射，在 Style Editor 部分下取消选中 Show original sources。这里还有a good article，它解释了源映射是如何工作的（虽然它使用 JS 源映射作为示例，但概念是相同的）。

Laravel 附带的 Bootstrap 文件与您下载的 CSS 文件没有直接联系。在您的public/css/ 目录中，您将拥有一个bootstrap.css 文件以及一个bootstrap.css.map 文件。如果您打开bootstrap.css 文件，您会看到文件末尾有一行：

/*# sourceMappingURL=bootstrap.css.map */

这告诉浏览器有一个同名的源映射文件，其中包含从编译的 CSS 到用 LESS 编写的源代码的映射。

如果您打开bootstrap.css.map，您会看到，虽然其中大部分用于处理映射都是乱码，但一开始有一个源路径数组，其中列出了经过编译以形成 CSS 的 LESS 文件文件。这就是浏览器在 CSS 检查器中读取和显示的内容。它并不真正知道您的服务器上有什么，它只是从源映射文件中知道.navbar-header 类的规则是在nav.less 文件中定义的，然后才被编译为CSS。这是为了在编译后更容易找到规则定义。

【讨论】：

我正在使用 Firefox。是不是一样的想法？
是的，无论浏览器如何，概念都是一样的。我已经用所需的额外细节更新了我的答案。
谢谢！我看到该选项并取消选中它会在css/bootstrap.css 显示正确的文件。我还看到了resources/assets/less/bootstrap/bootstrap.less，它引用了navbar.less。但是我仍然没有看到css/bootstrap.css（我从http://getbootstrap.com 单独添加）和resources/...（Laravel 5 附带）的文件之间的联系是相关的。这是如何运作的？运行@Amelia 提到的任务运行程序 gulp 会生成 css/app.less 但不会生成 css/bootstrap.css。
我已经用更详细的解释更新了我的答案。
非常感谢您的精彩回答！