vscode css自动补全默认可用，但提示不全、类名不出现、路径补不了等问题主因是语言服务未接管、上下文未识别或strings补全被误配；需分三层排查：属性值（内置）、类名（html服务+扩展）、自定义语法（专用扩展）。
VSCode 的 CSS 自动补全默认就能用，但多数人遇到的问题不是“没提示”，而是“提示不全”“类名不出现”“路径补不了”或“在 HTML 里写 <div class="..."> 时不联想项目中已定义的类”。核心原因不是插件没装，而是语言服务没接管、上下文没识别、或字符串内补全被关了。
<h3>CSS 属性与值补全为什么有时不弹？</h3>
<p>VSCode 内置的 CSS 语言服务（<code>css-language-features）只在明确的 CSS 上下文中激活，比如：.css、.scss 文件，或 <style></style> 标签内。它不会主动分析 JS 字符串里的 CSS 内联样式，也不会在普通字符串中触发。
-
editor.quickSuggestions中的strings必须为false（这是正确设置），否则会在所有字符串里乱弹 CSS 属性，干扰 JS/TS 补全 - 确保当前文件右下角显示的是
CSS或SCSS，而不是Plain Text；若显示错误，点击切换并选择对应语言模式 - 如果使用
@import或url()，路径补全依赖editor.quickSuggestions.strings为true—— 这和属性补全冲突，需按场景权衡：CSS 文件内建议保持strings: false，仅在需要路径补全时临时开
HTML 中 class 名称不自动补全怎么办？
这是最常被误认为“CSS 补全失效”的场景：你在 <div class="|"> 里打字，期望看到项目中所有 CSS 类名，但什么都没出来。这不是 CSS 插件的问题，而是 HTML 语言服务是否启用了 CSS 类名感知。
<ul>
<li>必须安装并启用 <code>ESLint 或 IntelliSense for CSS class names 类扩展（如官方 HTML Boilerplate 不行，要选带 CSS 类索引能力的）
index.css 被 <link> 引入，或 <style></style> 标签存在；VSCode 不会扫描 node_modules 里的第三方 CSS，除非你手动配置 "css.experimental.imports": true
card__header 不会因输入 card 就出现），需靠完整前缀匹配SCSS/Sass 文件里变量和 mixin 不提示？
原生 VSCode 不解析 Sass 变量和 @mixin，必须靠扩展补足。Prettier、Live Sass Compiler 等工具不提供补全能力，它们只负责编译。
- 安装
SCSS IntelliSense（作者: mrmlnc）—— 它能索引$var、@function、@mixin，并在.scss和<style lang="scss"></style>中生效 - 变量补全只在同文件或已
@import的文件中可用；跨文件未显式引入的_variables.scss不会被识别 - 若使用 Vite + SCSS，确认
vite.config.ts中没有禁用css.preprocessorOptions.sass.additionalData注入逻辑，否则全局变量可能漏索引
路径补全在 @import url(./...) 里失效？
CSS/SCSS 中的路径补全是独立通道，不走通用文件系统逻辑，也不读 jsconfig.json 的 paths 别名 —— 它只认相对路径和已知的 @import 链路。
- 确保
editor.quickSuggestions.strings为true（仅针对 CSS/SCSS 文件，可设 language-specific setting） - 路径必须以
./或../开头，@import "base"这种无后缀、无路径的写法不会触发补全 - 别名路径（如
@import "~styles/base"）完全不支持，VSCode 没有 Webpack alias 解析能力；改用标准相对路径或迁移到 CSS Modules / PostCSS alias 插件
真正卡住人的往往不是“怎么开补全”，而是没意识到 CSS 补全分三层：属性值（内置）、类名（靠 HTML 服务+扩展）、自定义语法（如 Sass 变量，靠专用扩展）。混用场景下，得分别确认每层是否就位，而不是统一调一个开关。
