页面未响应样式修改的根本原因是webstorm不执行构建，仅编辑代理预览；需启用volar、配置vite.config.ts中css.preprocessoroptions、确保scss/less插件安装并映射.vue文件类型，通过debug运行真实dev server触发hmr。
为什么
不是热更新失效，而是 WebStorm 默认不把 <style></style> 块内容实时注入到运行时 DOM。Vue 单文件组件的样式作用域（scoped）、预处理器（如 scss）、甚至 lang="less" 都需要对应 loader 才能解析——而 WebStorm 本身不执行构建，只做编辑和代理预览。
常见现象：改完 <style scoped></style> 里一个颜色，保存后 iframe 或浏览器没刷新；或者用了 @import 却提示 “undefined variable”。
- 确认项目已启用 Volar（不是 Vetur），否则
<style lang="scss"></style>的语法校验和错误提示会丢失 - 检查
vite.config.ts或vue.config.js是否配置了对应预处理器插件，比如vite-plugin-vue+less包 - WebStorm 的 Live Edit 插件对
<style></style>块支持有限，它主要监听 JS/TS 变更，CSS 更新需手动触发 HMR 或全量重载
怎样让修改立即反映在浏览器中？
核心思路：绕过 WebStorm 自带的“静态预览”，用真实开发服务器驱动预览。Live Edit 在 Vue SFC 场景下容易失灵，尤其涉及 scoped 样式或 CSS Modules。
