按Ctrl+Alt+T（Win/Linux）或Cmd+Alt+T（macOS）可提取CSS到外部文件，需选中完整声明块、确认作用域，并手动处理路径、选择器命名及复用逻辑。
CSS提取到外部文件用哪个快捷键
直接按 Ctrl+Alt+T（Windows/Linux）或 Cmd+Alt+T（macOS），光标停在选中的 CSS 块上，弹出菜单后选 “Extract CSS” 即可。它不是自动创建新文件，而是先让你选目标样式表（如 styles.css 或 component.scss），再插入规则并自动替换原内联样式。
常见错误是没选中完整声明块——比如只选了 color: red;，漏掉 font-size，结果只提一条；正确做法是用 Ctrl+W 多按几次，直到整个 CSS 块（含大括号）被高亮。Vue 文件里要确保光标在 <style> 区域内，否则菜单不出现 “Extract CSS” 选项。
提取时如何避免选择器冲突
WebStorm 默认生成的类名是基于当前上下文自动生成的（如 .user-card__header），但不会自动加命名空间或 BEM 前缀。如果你项目用的是 CSS Modules 或 scoped style，它仍会写成普通类名，需要手动改。
- 提取前先确认当前文件是否启用
scoped（Vue）或module（React），否则提取后样式可能全局污染 - 提取后立即检查生成的选择器：若原 HTML 是
<div class="header">，它可能生成.header，而非带组件前缀的版本 - 想强制加前缀？得先在设置里配好 CSS 命名约定：
Settings → Editor → Code Style → CSS → Naming，但该配置只影响新建规则，不影响已提取内容
提取后样式没生效？这几个地方要盯紧
最常卡在路径和作用域上。WebStorm 提取时默认写相对路径导入，比如从 src/views/Home.vue 提到 src/assets/css/home.css，它会在 Vue 文件顶部加 @import "./assets/css/home.css"; —— 但 Webpack/Vite 不一定支持这种写法，尤其用了 CSS-in-JS 或 PostCSS 插件时。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
-
@import路径错位：它用的是相对于当前文件的路径，不是项目根目录；建议提取后手动改成~@/assets/css/home.css或绝对路径 - 提取到 SCSS 文件却忘了加
@use或@import规则：SCSS 的@import已废弃，应优先用@use "home" as * - 提取后原 HTML 中的
class名没同步更新：WebStorm 不会自动改模板里的 class 属性，得手动核对
想把多个组件共用样式一键抽成公共类？别硬提
Ctrl+Alt+T → Extract CSS 只处理当前选中块，不跨文件聚合。真要复用，得先用 Ctrl+Shift+F 全局搜重复样式值（比如 12px solid #e0e0e0），再人工归并；或者用插件如 “CSS Peek” 查看哪些文件引用了同一类名，再决定是否拆成 _mixins.scss。
强行多次提取再合并，反而容易让 class 命名混乱、覆盖顺序错乱。更稳的做法是：先在 styles/_common.scss 里定义 @mixin border-light，再在各组件里 @include border-light —— 这种逻辑复用，比复制粘贴 CSS 块可靠得多。
真正省时间的不是“一键提取”，而是提取前想清楚：这组样式会不会变？变的话用变量还是 mixin？要不要加 !important？这些决策 WebStorm 不替你做，它只负责把代码挪个地方。
