浏览器无法直接加载SCSS，必须先编译为CSS再通过link标签引入；推荐使用sass --watch实时编译，并确保HTML中href路径与输出CSS位置一致，构建工具如Vite可自动处理无需手动写link。

link 标签加载的是 CSS，不是 SCSS

SCSS 是源码格式，浏览器根本不认识 .scss 文件。你必须先用编译器（如 sass、dart-sass 或构建工具）把它转成标准 CSS，再用 引入生成的 .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"
• 确保输出路径和

HTML 里 link 标签怎么写才不会 404

路径错是常见问题。关键看三件事：

• 的 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'，它会自动编译并注入 标签，无需
• 如果坚持用 ，就得配置插件（如 vite-plugin-static-copy）把编译后的 CSS 拷到 public/ 下，并确保路径匹配
• Webpack + MiniCssExtractPlugin 会输出独立 CSS 文件，但最终 HTML 模板仍需正确引用该文件名（常配合 HtmlWebpackPlugin 自动注入）

最易忽略的一点：很多人改了 SCSS 却没检查浏览器是否真的加载了最新 CSS——缓存、路径 404、构建未触发、输出目录权限不足，都会让 看似生效实则空转。