Fatal编程技术网
  • css/
  • 为什么Chrome开发工具有时会显示scss文件而不是编译的css文件？

为什么Chrome开发工具有时会显示scss文件而不是编译的css文件？

css google-chrome google-chrome-devtools

为什么Chrome开发工具有时会显示scss文件而不是编译的css文件？,css,google-chrome,google-chrome-devtools,scss-mixins,Css,Google Chrome,Google Chrome Devtools,Scss Mixins,如上图所示，当检查某些元素时，Chrome开发工具显示它与.scss文件相关，当我单击该文件时，它是空的。我在macOS上用Safari进行了测试，它也显示了这个scss文件，但当单击时，它正确地显示了这个scss文件的内容。似乎开发工具在这里被窃听了 无论如何，我的问题是，Chrome开发工具（以及类似工具）在什么情况下会显示scss文件而不是编译的css文件？您不必显示scss文件，请取消选中启用css源映射复选框 第1步：-请打开chrome开发者工具 第2步：-按F1键 步骤3:-取消选

如上图所示，当检查某些元素时，Chrome开发工具显示它与.scss文件相关，当我单击该文件时，它是空的。我在macOS上用Safari进行了测试，它也显示了这个scss文件，但当单击时，它正确地显示了这个scss文件的内容。似乎开发工具在这里被窃听了

无论如何，我的问题是，Chrome开发工具（以及类似工具）在什么情况下会显示scss文件而不是编译的css文件？

您不必显示scss文件，请取消选中启用css源映射复选框

  • 第1步：-请打开chrome开发者工具
  • 第2步：-按F1键
  • 步骤3:-取消选中启用CSS源映射复选框

    • 您不必显示scss文件，请取消选中启用CSS源地图复选框

  • 第1步：-请打开chrome开发者工具
  • 第2步：-按F1键
  • 步骤3:-取消选中启用CSS源映射复选框
    • 这是因为
    typography.css.map
    文件与
    typography.css
    文件位于同一目录中。Chrome可以识别这个地图文件，并显示
    typography.scss
    ，而不是
    typography.css
    。这也适用于mozilla。

    这是因为
    typography.css.map
    文件与
    typography.css
    文件位于同一目录中。Chrome可以识别这个地图文件，并显示
    typography.scss
    ，而不是
    typography.css
    。这也适用于mozilla。

    这些scss文件在编译为css时生成了源映射文件，您可以在实际的
    scss
    或
    css
    文件旁边找到它们。这些scss文件在编译为css时生成了源映射文件，您可以在实际的
    scs
    或
    css
    文件旁边找到它们。请看被接受的答案。我碰巧没有这个答案。请看接受的答案。