安全删除 vue sfc 中的 style 标签需分场景：①删全部 style 用 ]*>[\s\s]*?（启用 .*）；②仅删 scoped 的用 ]*>[\s\s]*?；③删后 class 名残留属正常，因正则不解析样式依赖，需外部工具处理。
怎么安全删掉 Vue 单文件组件里的 style 标签？
直接删整个 <style></style> 块不能靠模糊匹配，比如用 <style.>[\s\S]*?</style.> 会误吞 <style scoped></style> 里嵌套的 <template></template> 字符串、JSX 片段或注释中的 。必须锚定起始和结束标签，并排除注释干扰。
操作前先确保语法高亮为 Vue Component（Ctrl+Shift+P → Set Syntax: Vue Component），否则正则可能跨错边界。
- 查找：
<style>]*>[\s\S]*?</style>，必须勾选.*（. matches newline） - 替换为空
- 点
Replace All前务必先点Find All预览——尤其检查是否命中了<!-- <style> -->这类注释内容
如何只删 scoped 样式但保留全局 style？
Vue SFC 中混用 <style></style> 和 <style scoped></style> 很常见，强行删全部会破坏全局样式逻辑。精准分离靠属性名和空格容错。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 查找：
<style>]*>[\s\S]*?</style>（\s+确保匹配scoped是独立单词，防unscoped误伤） - 替换为空
- 注意：如果
scoped写在换行后（如<style scoped></style>），需把\s+改成\s*，但会略微增加误匹配风险 - 不推荐用
scoped="scoped"这种写法——Vue 不支持，且 Sublime 正则无法区分真假属性值
删完 style 后，为什么 <template></template> 里还残留 class 名？
删 <style></style> 标签 ≠ 清理无用 class。Sublime 的正则不解析 DOM 结构，它不会知道 class="btn btn-primary" 是否还有对应样式定义。这是两个层面的问题。
- 若目标是“移除未使用 class”，必须借助外部工具（如 PurgeCSS、unocss CLI 或 Volar 的 CSS 类检测）
- Sublime 只能做辅助：比如用
\bclass\s*=\s*["']([^"']*)["']提取所有 class 值，复制到外部分析器处理后再粘回 - 别用
class=".*?"直接替换为空——它会吃掉class="text-red-500" :class="dynamic"里的绑定表达式，导致 JS 报错
为什么 all: unset 不能靠正则批量删？
all: unset 是 CSS 声明，不是 HTML 标签，它藏在 <style></style> 块内部。想单独剔除这类重置规则，得进块内操作，但风险陡增。
- 查找：
all\s*:\s*unset\s*;，仅匹配单行声明；跨多行写法（如all:\n unset;）需启用.*并改用all\s*:\s*unset\s*;+ 换行符通配，极易误触all: initial或注释 - 更稳妥的做法：删整个
<style></style>块后，再手动补必要规则（如img { max-width: 100% }），而非在混乱的样式块里“挖宝” - 真正要清空样式，应该在构建层用 PostCSS 插件或 Tailwind 的
purge配置，不是靠编辑器正则
正则在 Sublime 里只是字符串手术刀，它不理解 Vue 的作用域、CSS 的层叠逻辑、或 class 的运行时绑定。越想一步到位，越容易把组件切得无法恢复。留一两个 <style></style> 块，比删错三处 class 或漏掉一个 ::v-deep 更省调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
