为何出现额外样式文件引用？Bootstrap CSS调试疑问

嗨，别担心，你遇到的是Chrome开发者工具的正常功能，我来帮你拆解清楚：

• 为什么会看到_navbar.scss这类文件？
  这是因为Bootstrap官方提供的bootstrap.min.css带有源映射（Source Maps）。源映射是一种将编译后的压缩文件（比如min.css）和原始的预处理器源码（比如SCSS文件）关联起来的技术。当浏览器加载带源映射的CSS时，DevTools会自动帮你映射到对应的SCSS文件，这样你调试时看到的是结构清晰的原始SCSS代码，而不是被压缩混淆的CSS，方便定位样式问题。

• 为什么bootstrap.min.css里看似“无样式”？
  样式其实都在里面！只是压缩后的CSS为了减小体积，把所有代码合并、混淆成了极少的行数，直接看的话会一团乱。你可以在Sources标签里打开bootstrap.min.css，然后点击左下角的{}按钮（格式化代码），就能看到排版整齐的完整CSS样式了；或者在Network标签里查看该文件的响应内容，也能看到压缩后的全部代码。

• 是不是错误使用了Chrome开发者工具？
  完全不是哦，这是DevTools为前端开发者提供的便利调试功能。如果你不想看到SCSS源文件，只想查看编译后的CSS，可以按F1打开DevTools设置，找到「Sources」板块，关闭「Enable CSS source maps」选项，之后就只会显示bootstrap.min.css的内容了。

内容的提问来源于stack exchange，提问作者u936293