引导程序 3 + SASS答案

【问题标题】：Bootstrap 3 + SASS引导程序 3 + SASS
【发布时间】：2015-08-27 10:16:46
【问题描述】：

我正在使用带有 MVC 应用程序的 bootstrap 3 的 sass 版本。

使用谷歌浏览器查看样式时 - 检查器引用的文件较少。 html 页面中引用的唯一文件是 bootstrap.css（我没有包含任何更少的文件）。

但是，例如查看按钮上的字体大小。它引用了buttons.less，如果你去Chrome中的源，你可以导航css/less并查看所有less文件（这些文件在文件系统上不存在）

为什么 Chrome 引用的是 less 文件（而不是 SCSS 文件）？地图文件由 Visual Studio 2013 更新 4 重新生成。

如果我使用 FireFox（点击相同的 mvc/html 页面），它会适当地显示对 scss 文件的引用。

那么地图文件是否存在问题（我认为没有原因导致 FireFox 能够正常读取）为什么 Chrome 引用的文件较少？

谢谢

【问题讨论】：

我指的是 sass-lang.com 以及我在 Chrome 中遇到问题的方式/原因。即为什么 Chrome 引用较少的文件（而不是 SCSS 文件）？

标签： css twitter-bootstrap-3 sass less google-chrome-devtools

【解决方案1】：

您的 bootstrap.css 文件可能包含使用 Less 编译的内联源映射。

见：http://lesscss.org/usage/#command-line-usage-options：

lessc --source-map-map-inline

This option specifies that the map file should be inline in the output CSS. This is not recommended for production, but for development it allows the compiler to produce a single output file which in browsers that support it, use the compiled css but show you the non-compiled less source.

第二个源映射注释可能指向您使用 Sass 生成的源映射。当在同一个文件中引用两个不同的源映射时，Chrome 和 FF 会显示不同的结果。

我不确定为什么必须在文件中获取地图。如果您在 Sass 代码中导入使用 Less 编译的 CSS 代码，可能会发生这种情况。

【讨论】：