安全删除 Vue SFC 中的 style 标签需分场景：①删全部 style 用 <style\b[^>]*>[\s\S]*?</style>（启用 .*）；②仅删 scoped 的用 <style\s+scoped[^>]*>[\s\S]*?</style>；③删后 class 名残留属正常，因正则不解析样式依赖，需外部工具处理。
怎么安全删掉 Vue 单文件组件里的 style 标签？
直接删整个 <style> 块不能靠模糊匹配，比如用 <style.*?>[\s\S]*?</style> 会误吞 <style scoped> 里嵌套的 <template> 字符串、JSX 片段或注释中的 </style>。必须锚定起始和结束标签，并排除注释干扰。
操作前先确保语法高亮为 Vue Component（Ctrl+Shift+P → Set Syntax: Vue Component），否则正则可能跨错边界。
- 查找：
<style\b[^>]*>[\s\S]*?</style>，必须勾选.*（. matches newline） - 替换为空
- 点
Replace All前务必先点Find All预览——尤其检查是否命中了<!-- <style> -->这类注释内容
如何只删 scoped 样式但保留全局 style？
Vue SFC 中混用 <style> 和 <style scoped> 很常见，强行删全部会破坏全局样式逻辑。精准分离靠属性名和空格容错。
- 查找：
<style\s+scoped[^>]*>[\s\S]*?</style>（\s+确保匹配scoped是独立单词，防unscoped误伤） - 替换为空
- 注意：如果
scoped写在换行后（如<style\n scoped>），需把\s+改成\s*，但会略微增加误匹配风险 - 不推荐用
scoped="scoped"这种写法——Vue 不支持，且 Sublime 正则无法区分真假属性值
删完 style 后，为什么 <template> 里还残留 class 名？
删 <style> 标签 ≠ 清理无用 class。Sublime 的正则不解析 DOM 结构，它不会知道 class="btn btn-primary" 是否还有对应样式定义。这是两个层面的问题。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
- 若目标是“移除未使用 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> 块内部。想单独剔除这类重置规则，得进块内操作，但风险陡增。
- 查找：
all\s*:\s*unset\s*;，仅匹配单行声明；跨多行写法（如all:\n unset;）需启用.*并改用all\s*:\s*unset\s*;+ 换行符通配，极易误触all: initial或注释 - 更稳妥的做法：删整个
<style>块后，再手动补必要规则（如img { max-width: 100% }），而非在混乱的样式块里“挖宝” - 真正要清空样式，应该在构建层用 PostCSS 插件或 Tailwind 的
purge配置，不是靠编辑器正则
正则在 Sublime 里只是字符串手术刀，它不理解 Vue 的作用域、CSS 的层叠逻辑、或 class 的运行时绑定。越想一步到位，越容易把组件切得无法恢复。留一两个 <style> 块，比删错三处 class 或漏掉一个 ::v-deep 更省调试时间。
