HTML中引入CSS文件的简单方法
欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《使用 link 标签加载编译后的 CSS 文件非常简单，只需在 HTML 的 部分中添加一个 标签，指向编译后的 CSS 文件路径即可。以下是具体步骤和示例：✅ 1. 编译 SCSS 为 CSS首先，你需要将 .scss 文件编译成 .css 文件。可以使用工具如：Sass CLI（推荐）WebpackGulpVS Code 插件（如 Live Sass Compiler）例如，使用 Sass CLI 编译：sass --watch input.scss:output.css这会将 input.scss 编译为 output.css，并实时监听文件变化。✅ 2. 在 HTML 中引入编译后的 CSS在 HTML 文件的 部分，使用 标签引入编译后的 CSS 文件：
浏览器无法直接加载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'，它会自动编译并注入
