网页从哪里加载scss文件？

Question

所以我正在开发一个Web项目，我开始使用其他人创建的HTML / CSS模板。它似乎使用了我不太了解的bootstrap。

使用chrome dev工具后，我注意到应用的一些css样式来自我在系统上找不到的scss文件。我想知道这些文件存在于哪里???

截图来自

1. Chrome开发工具告诉我应用样式的scss文件的路径
2. 我的系统上scss文件夹似乎不存在的相同路径。请注意，我是＆＃34;供应商＆＃34;文件夹，但没有像开发工具认为有
的scss文件夹

有人可以向我解释浏览器从哪里加载这些scss文件？我试过让windwos显示隐藏的文件和文件夹，这并没有什么不同。谢谢！

Path to scss file via Chrome Dev Tools

That same path on my file system

Answer 1

这是因为scss源图。它在将scss文件编译为CSS时生成，以便于调试。

我假设你正在使用bootstrap的开发版本。如果您使用的是生产版本，那就不会发生。

您可以找到有关此here

的更多信息

Answer 2

项目路径中可能包含扩展名为.map的文件（在scss世界中称为源映射）。这些.map文件引用开发过程中用来创建.scss文件的.css文件的路径。因此，即使您的上下文路径中没有物理.scss文件；并且您的html文件引用的是已编译的.css文件，Chrome调试器仍会显示从中.scss进行编译的原始.css文件。如果您需要Chrome调试器显示实际的.css文件名，则可以暂时删除.map文件。此建议是考虑到您希望查看.css文件名而不是不存在的.scss文件。您也可以检查此链接，以了解有关在Chrome调试器中使用.scss文件的更多信息：https://www.sitepoint.com/using-source-maps-debug-sass-chrome/