SCSS编译后CSS在Live Server无法加载，报本地资源加载错误

原因分析 #

你在HTML里引用CSS时用了本地绝对路径（file://协议），但Live Server是通过HTTP协议（http://localhost:端口号）提供服务的。浏览器的安全策略禁止HTTP页面加载本地file://协议的资源，这就是控制台警告、CSS不生效的根本原因。

解决步骤 #

• 改用相对路径引用CSS
  假设你的项目文件结构是：

  Portfolio Website/
  ├─ index.html
  └─ styles/
     └─ style.css
  

  把HTML里的CSS引用代码改成相对路径：

  <link rel="stylesheet" href="styles/style.css">
  

  或者带当前目录标识的写法：

  <link rel="stylesheet" href="./styles/style.css">
  

• 校验Sass编译输出路径
  检查Live Sass Compiler的配置，确保编译后的CSS文件输出到正确的相对路径下。在VS Code的设置中找到liveSassCompile.settings.formats，确认savePath是相对项目根目录的路径，比如：

  "liveSassCompile.settings.formats": [
      {
          "format": "expanded",
          "savePath": "./styles/"
      }
  ]
  

• 确保Live Server从项目根目录启动
  在VS Code中右键点击项目根目录下的index.html，选择「Open with Live Server」，避免单独打开HTML文件导致服务根目录不正确。

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