求助：Sass已转CSS但样式无法应用到HTML页面

先整理你提供的代码：

编译后的CSS代码 #

p{
    color: blue;
}

页面HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="sport.scss">
</head>
<body>
    <p>Helllooo</p>
</body>
</html>

具体排查步骤： #

• 修正样式文件引用：浏览器无法直接解析.scss文件，你必须引用编译后的.css文件。比如编译后生成sport.css，就把引用改成 <link rel="stylesheet" href="sport.css">。
• 核对文件路径：对比前两个正常页面的样式引用路径，检查第三个页面的CSS文件是否和HTML在同一目录，有没有路径拼写错误、大小写不一致（部分系统区分文件名大小写）的情况。
• 查看浏览器网络请求：按F12打开开发者工具，切换到Network面板，刷新页面看样式文件的请求状态：
  • 若显示404，说明文件路径错误，找不到对应CSS；
  • 若显示200，查看响应内容是否是正确的CSS代码，排查编译后的文件是否为空或未同步更新。
• 检查Sass编译配置：确认编译后的CSS文件输出路径是否适配第三个页面的目录结构，避免因页面层级不同导致路径失效。
• 清除浏览器缓存：强制刷新页面（Ctrl+F5），避免旧缓存导致样式无法加载。

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