SCSS中@media print样式不生效问题求助

• 先确认SCSS是否正确编译到最终生效的CSS文件中
  直接在浏览器开发者工具的「Sources」面板里搜索编译后的CSS文件，查找@media print规则是否存在，以及对应的#printable-content样式是否完整。如果编译时漏掉了这块规则，那肯定不会生效。

• 用浏览器的打印媒体模拟功能检查样式应用
  打开浏览器开发者工具，切换到「Rendering」面板（Chrome可通过右上角三个点→More tools→Rendering找到），在「Emulate CSS media type」里选择print，然后查看#printable-content元素的样式：

  • 看你写的display、width等规则有没有出现在「Styles」面板中
  • 检查是否有更高优先级的样式（比如内联样式、更具体的选择器）覆盖了你的规则，哪怕加了!important也可能被内联样式压过

• 检查浏览器打印设置的「背景图形」选项
  你的规则里设置了background-color，但多数浏览器默认会禁用打印背景颜色/图形。打开打印预览（Ctrl+P），找到「更多设置」（Chrome）或对应设置项（Firefox），勾选「背景图形」再预览，看背景色是否生效。

• 排查JavaScript打印逻辑的干扰
  你用JS实现打印功能，要确认在调用window.print()之前，有没有修改过#printable-content的DOM结构或样式（比如动态添加类、修改内联样式）。可以在打印前加个断点，查看元素的当前样式状态，避免临时修改覆盖了@media规则。

• 验证选择器是否匹配目标元素
  确保打印状态下，页面中确实存在id="printable-content"的元素，且没有被其他逻辑隐藏或替换。在打印媒体模拟模式下，直接在Elements面板里搜索这个id，确认元素存在且可见。

内容的提问来源于stack exchange，提问作者Luka Gluščević