编译后的 Sass 文件生成标准 CSS，需用 <link> 正确引入；确保路径准确、文件已生成且可访问，通过开发者工具验证 200 状态和样式生效。
编译后的 Sass 文件会生成标准的 CSS 文件，只需像引入普通 CSS 一样用 <link> 标签引入即可，关键在于路径正确、文件已生成且被浏览器可访问。
确认 CSS 文件已成功生成
使用 Sass 编译器（如 Dart Sass、Node Sass 或构建工具）将 .scss 或 .sass 文件编译为纯 CSS。例如：
- 命令行编译：
sass src/style.scss dist/style.css - 确保输出目录（如
dist/）存在，且style.css确实被写入 - 检查浏览器开发者工具的 Network 面板，看 CSS 是否返回 200 状态
在 HTML 中用 link 正确引入
将生成的 CSS 文件通过 <link rel="stylesheet"> 加载，注意路径相对于 HTML 文件的位置：
- 如果 HTML 在根目录，CSS 在
css/style.css：<link rel="stylesheet" href="css/style.css"> - 如果使用绝对路径（推荐用于生产环境）：
<link rel="stylesheet" href="/static/css/style.css"> - 避免常见错误：路径拼写错误、大小写不一致（尤其在 Linux 服务器上）、漏掉
.css后缀
配合开发流程自动更新
手动编译易出错，建议接入自动化流程：
立即学习“前端免费学习笔记（深入）”；
- 使用
sass --watch监听源文件变化并实时编译：sass --watch src/style.scss:dist/style.css - 集成到构建工具中（如 Webpack + sass-loader、Vite、Gulp），让 CSS 自动注入或输出
- 开发时可开启 Live Server 插件（VS Code），保存即刷新页面，看到样式生效
验证是否生效的小技巧
引入后快速确认 CSS 是否起作用：
- 打开浏览器开发者工具（F12），查看 Elements 面板中
<head>下是否有该<link>，且无叉号或警告 - 切换到 Network → Filter 输入
.css，点击该文件，看 Preview 是否显示正确样式内容 - 临时在 Sass 源文件中加一条明显样式（如
body { background: pink !important; }），保存后刷新页面观察变化
