浏览器可以直接解析scss文件了吗？

Question

我们都知道，前端浏览器支持解析.css的样式文件，对于.scss文件需要安装Sass编译器，编译成.css的文件，但是我偶然发现有直接使用.scss文件，点击这个文件且无法打开具体内容，有大神解答下吗，这是怎么实现的

图片示例链接地址 F12打开，随便选择一个页面元素

Answer 1

这是 SourceMap（源代码映射）

你可以打开网络面板，实际请求的都是 css 文件。随便打开一个 css 文件，最后面有一行：

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

这一行告诉浏览器这个 css 文件的源代码信息。

浏览器本来应该在样式面板显示样式的来源为 xxx.css，但是这里告诉了浏览器 xxx.css 不是源文件，而是由 xxx.scss 编译而来的，于是浏览器就显示 xxx.scss 了。

不只是 scss，浏览器里还能直接显示 vue 文件和 ts 文件，还能在里面打断点，只要配置了 SourceMap。

至于无法访问文件内容，这是因为源文件 xxx.scss 没有部署到服务器上。

一般来说，SourceMap 只会出现在开发环境，生产环境会去掉，难道 Github 也是草台班子？