atom-html-preview改CSS不刷新，因其不监听文件变更，仅手动触发时读取一次HTML并内嵌渲染，且依赖file://协议，导致@import、fetch等全部失效；真正实时预览需用atom-live-server启HTTP服务，监听保存事件自动刷新，但必须通过http://访问且资源路径需在服务根目录内。
atom-html-preview 为什么改了 CSS 不刷新？
它根本不监听文件变更，只在你手动触发 Ctrl+Shift+H（Windows/Linux）或 Cmd+Shift+H（macOS）时读取一次 HTML 文件内容并渲染。CSS 文件哪怕被保存了，预览面板也完全无感。
更关键的是：它加载资源走的是 file:// 协议，不经过 HTTP 服务器，所以 @import 规则、url(./fonts/xxx.woff)、fetch() 全部失效——不是配置问题，是协议限制。
- 确保当前文件后缀是
.html，且右下角状态栏显示HTML，不是Plain Text - 关闭 Atom 后重装
atom-html-preview，否则右键菜单可能不出现Preview HTML - 相对路径图片/CSS 引用失败？把 HTML 放到项目根目录，或改用绝对路径（如
/css/style.css），但仅限本地文件系统可访问路径
atom-live-server 是唯一靠谱的实时方案
它起一个真正的本地 HTTP 服务（默认 http://localhost:3000），所有浏览器 API（fetch、@import、CORS）都正常，且监听文件保存事件自动刷新页面。
但必须注意：启动时当前打开的 HTML 文件所在目录，才是它的“服务根目录”。比如你在 /project/src/index.html 按 Ctrl+Alt+L，那 /project/assets/ 下的 CSS 就不在监听范围内，改了也不会触发刷新。
立即学习“前端免费学习笔记（深入）”；
- 安装命令：
apm install atom-live-server，装完必须重启 Atom - 快捷键
Ctrl+Alt+L只对当前激活的 HTML 文件生效，且只监听该文件及其子目录 - 浏览器必须用
http://localhost:3000/xxx.html打开，绝不能用file:///协议 - 若需监听整个项目，把
index.html放到项目根目录再启动
分屏写 CSS + 实时看效果怎么配？
Atom 本身不支持“左写 CSS、右实时渲染”的联动，所谓分屏预览，本质是布局操作 + 插件组合，没有自动同步逻辑。
用 preview-plus 分屏后，右侧预览 Pane 不会随左侧保存自动更新；用 open-in-browser 则完全脱离 Atom 界面管理，靠你手动切窗口——这不是缺陷，是设计使然。
- 左右分屏：按
Ctrl+K → Right，在右侧 Pane 打开同项目下的 HTML 文件 - 右侧 Pane 中执行
Ctrl+Shift+P→ 输入preview-plus:toggle，启用内嵌预览 - 但每次改完 CSS 都得手动按
F5或重新toggle，它不绑定保存事件 - 真要稳定反馈，放弃内嵌预览，终端运行
npx live-server --port=8080，再用open-in-browser打开http://127.0.0.1:8080
CSS 热重载（HMR）在 Atom 里根本不存在
别被“实时”二字误导。Atom 所有插件都不提供类似 Webpack 的 CSS 注入能力——改一行样式，不会局部更新 DOM 样式表，只会整页 reload。
这意味着动画中断、表单状态丢失、JS 上下文重置。如果你依赖调试交互行为，这种刷新方式比手动 F5 还麻烦。
-
atom-live-server的刷新是硬 reload，不是 HMR - 没有插件能绕过浏览器安全策略，在
file://下实现真正热重载 - 复杂前端项目请直接迁移到 VS Code + Live Server 插件，或用 Vite CLI 启服务
file:// 协议硬扛现代前端需求。HTTP 服务不是可选项，是必要前提。 
