浏览器无法直接加载SCSS，必须先编译为CSS再通过link标签引入；推荐使用sass --watch实时编译，并确保HTML中href路径与输出CSS位置一致，构建工具如Vite可自动处理无需手动写link。
link 标签加载的是 CSS，不是 SCSS
SCSS 是源码格式，浏览器根本不认识 .scss 文件。你必须先用编译器（如 sass、dart-sass 或构建工具）把它转成标准 CSS，再用 <link rel="stylesheet"> 引入生成的 .css 文件——这是唯一可行方式。
本地开发时怎么让 sass 编译后自动更新 CSS
手动每次改完都运行 sass input.scss output.css 太麻烦。推荐加监听模式：
- 命令行实时编译：
sass --watch src/styles.scss:dist/styles.css
- 如果用 npm，可写 script：
"build:css": "sass src/styles.scss dist/styles.css"和"watch:css": "sass --watch src/styles.scss:dist/styles.css" - 确保输出路径和
<link href="...>中的路径一致，比如href="dist/styles.css"
HTML 里 link 标签怎么写才不会 404
路径错是常见问题。关键看三件事：
-
<link>的href是相对于 HTML 文件所在位置的，不是相对于 SCSS 源文件 - 如果 HTML 在根目录，CSS 输出到
css/main.css，就写href="css/main.css" - 开发服务器（如
live-server、Vite、Webpack Dev Server）默认只托管public或根目录下的静态资源，别把 CSS 放进src/里然后指望 link 能直接访问
用 Webpack/Vite 等构建工具时，link 还要手写吗
不用。现代构建工具通常会接管样式处理流程：
立即学习“前端免费学习笔记（深入）”；
- Vite 项目中，你可以在
main.js里import './styles.scss'，它会自动编译并注入<style>标签，无需<link> - 如果坚持用
<link>，就得配置插件（如vite-plugin-static-copy）把编译后的 CSS 拷到public/下，并确保路径匹配 - Webpack +
MiniCssExtractPlugin会输出独立 CSS 文件，但最终 HTML 模板仍需正确引用该文件名（常配合HtmlWebpackPlugin自动注入）
最易忽略的一点：很多人改了 SCSS 却没检查浏览器是否真的加载了最新 CSS——缓存、路径 404、构建未触发、输出目录权限不足，都会让 <link> 看似生效实则空转。
