Laravel 5、Bootstrap 及更少
Laravel 5, Bootstrap, and Less
我刚刚开始使用 Laravel 5，然后我按照 guide 安装了 Bootstrap。我是第一次使用 Laravel，我对响应式主题和相关技术不熟悉。
然后我去 Startbootstrap 试用了 Laravel 框架中的模板之一。根据指南，我通过复制 only 和 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。
看起来 LESS 是在启用源映射的情况下编译的，而且 Chrome 启用 CSS 源映射 似乎也处于活动状态。这就是您从 LESS 文件中看到实际映射规则的原因。以下文章解释了它的工作原理以及如何禁用它：
在 Firefox 中，您可以在开发人员工具选项中禁用 CSS 源映射，在 样式编辑器 部分下取消选中 显示原始来源 。还有这里的 a good article 解释了 source maps 是如何工作的（虽然它使用 JS source maps 作为示例，但概念是相同的）。
Laravel 附带的 Bootstrap 文件与您下载的 CSS 文件没有直接联系。在您的 public/css/ 目录中，您将有一个 bootstrap.css 文件，以及一个 bootstrap.css.map 文件。如果您打开 bootstrap.css 文件，您会看到文件末尾有一行：
/*# sourceMappingURL=bootstrap.css.map */
这告诉浏览器有一个同名的源映射文件，其中包含从编译的 CSS 到用 LESS 编写的源代码的映射。
如果你打开 bootstrap.css.map 你会看到，虽然其中大部分是处理映射的乱码，但在最开始有一个源路径数组，列出了编译的 LESS 文件形成 CSS 文件。这就是浏览器在 CSS 检查器中读取和显示的内容。它并不真正知道你的服务器上有什么，它只是从源映射文件中知道 .navbar-header class 的规则是在编译之前在 nav.less 文件中定义的至 CSS。这是为了在编译后更容易找到规则定义。
我刚刚开始使用 Laravel 5，然后我按照 guide 安装了 Bootstrap。我是第一次使用 Laravel，我对响应式主题和相关技术不熟悉。
然后我去 Startbootstrap 试用了 Laravel 框架中的模板之一。根据指南，我通过复制 only 和 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。
看起来 LESS 是在启用源映射的情况下编译的，而且 Chrome 启用 CSS 源映射 似乎也处于活动状态。这就是您从 LESS 文件中看到实际映射规则的原因。以下文章解释了它的工作原理以及如何禁用它：
在 Firefox 中，您可以在开发人员工具选项中禁用 CSS 源映射，在 样式编辑器 部分下取消选中 显示原始来源 。还有这里的 a good article 解释了 source maps 是如何工作的（虽然它使用 JS source maps 作为示例，但概念是相同的）。
Laravel 附带的 Bootstrap 文件与您下载的 CSS 文件没有直接联系。在您的 public/css/ 目录中，您将有一个 bootstrap.css 文件，以及一个 bootstrap.css.map 文件。如果您打开 bootstrap.css 文件，您会看到文件末尾有一行：
/*# sourceMappingURL=bootstrap.css.map */
这告诉浏览器有一个同名的源映射文件，其中包含从编译的 CSS 到用 LESS 编写的源代码的映射。
如果你打开 bootstrap.css.map 你会看到，虽然其中大部分是处理映射的乱码，但在最开始有一个源路径数组，列出了编译的 LESS 文件形成 CSS 文件。这就是浏览器在 CSS 检查器中读取和显示的内容。它并不真正知道你的服务器上有什么，它只是从源映射文件中知道 .navbar-header class 的规则是在编译之前在 nav.less 文件中定义的至 CSS。这是为了在编译后更容易找到规则定义。