我的网页从哪里加载其 scss 文件？

Question

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

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

截图来自

1. Chrome 开发工具告诉我应用样式的 scss 文件的路径

2. 我的系统上的 scss 文件夹所在的路径似乎不存在。请注意，我位于“vendor”文件夹中，但没有 scss 文件夹，正如开发工具所示。

有人可以向我解释浏览器从哪里加载这些 scss 文件吗？我尝试过让 Windows 显示隐藏的文件和文件夹，但这没有什么区别。谢谢！

通过 Chrome 开发工具访问 scss 文件的路径：

我的文件系统上的相同路径

Answer 1

发生这种情况是因为 scss sourcemap。将scss文件编译为CSS时生成，方便调试。

我假设您正在使用 bootstrap 的开发版本。如果您使用生产版本，则不会发生这种情况。

您可以在这里找到更多相关信息

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/

Answer 3

当您使用 SASS、SCSS 等 CSS 预处理器时，结合 Webpack 等构建工具，*.scss 文件将在构建过程中编译为 *.css。这可能不会生成 1 -> 1 文件映射，但可能会将多个 *.scss 文件合并到单个 *.css 文件。

根据您的构建工具配置，输出的 *.css 文件可能会附带一个 源 *.map 文件

源映射由您的开发 Web 服务器提供（如果以这种方式配置，则为生产服务器），并且如果存在则由浏览器自动下载（浏览器查找与每个 js、css 等文件同名的源映射文件他们下载）。

当您在浏览器上打开 Dev Tools 时，它会解析源映射文件，本质上是重新创建开发环境文件结构、命名、语法等，以便您可以通过查看源代码轻松调试您的 Web 应用程序.

长话短说： 您看到的 *.scss 文件是通过浏览器上的 *.map 文件“重新创建”的。

请注意，您可以在构建工具上禁用源映射，甚至只是从项目文件夹中删除所有 *.map 文件，以便查看浏览器解析的实际 CSS 代码。