使用 angular 和 bootstrap 5 beta 找不到 VS 代码 CSS class 选择器

Question

我将 bootstrap 5 与 angular 一起使用，并将样式和脚本添加到 angular.json，但 VS Code 中的问题是它无法识别 bootstrap 类.

Answer 1

安装此扩展程序https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

然后在你的.vscode/settings.json:

{
  "css.styleSheets": [
    "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0beta1/dist/css/bootstrap.min.css"
  ]
}

重启vscode。为我工作。

Answer 2

卸载这个名为“HTML CSS Support”的扩展，然后重新加载。它对我有用，我希望它对你也有用。

Answer 3

检查扩展“HTML CSS 支持”是否自动更新。如果是这样，那么它将要求重新加载 VS 代码。做吧。今天遇到了完全相同的问题。

更新

这没有帮助。

看起来这个问题应该在下一个扩展版本中得到解决，但仍然存在一些问题。检查 github： https://github.com/ecmel/vscode-html-css/issues

简而言之，您需要做的是转到 VS Code 设置，然后从“用户”切换到“工作区”。然后在设置搜索栏中键入“css settings”，并在“Extensions”下打开完全相同的选项。单击“CSS：样式表”，这将打开 settings.json 工作区并在其中添加 CSS 文件路径。希望它能为您解决所有问题。

Answer 4

正如其他人所说，卸载 HTML CSS 支持 然后重新加载 VS 代码。如果需要，您可以对 CSS class 中的 CSS class 名称使用 IntelliSense，它提供 CSS class 名称完成对于 HTML class 属性，基于在您的工作区中找到的定义或通过 link 元素引用的外部文件。并为您提供可以在您的工作区中找到的 CSS class 定义的自动完成功能（在 CSS 文件或“支持的语言模式”部分中列出的文件类型中定义）

Answer 5

只需在 settings.json 中关闭 CSS 验证。

Answer 6

我遇到了同样的问题。原来是 and 中提到的相同 'HTML/CSS Support' 扩展的问题。在过去的几天里，该扩展似乎有 7 个不同的版本。 v1.3.3 似乎是该扩展的最新工作版本。

Answer 7

恢复到 'HTML/CSS Support' 扩展的 v1.3.3，直到排序在我的机器上工作

Answer 8

先卸载 HTML CSS 支持，然后重新加载我 100% 确定它会实际工作 HTML CSS 支持有时会检查您的 HTML CSS 代码，如果存在误报则给出错误

Answer 9

如果您使用更新版本的 HTML CSS 支持 (>= 1.5.0)，您可以将以下 css.validation 设置添加到 settings.json 中应该清除这个问题。不过不要忘记在更改设置后重新加载 VS Code。

Answer 10

将 'HTML CSS Support' 扩展降级到 v1.3.3 将解决该问题。

Answer 11

扩展问题“HTML CSS 支持” 卸载它或使用旧版本。

Answer 12

我在 Bootstrap5 的 Angular 项目中使用 SCSS 作为 CSS 预处理器。我安装了以下插件，问题解决了。

SCSS Everywhere

Answer 13

现在，使用 bootstrap 5 和 angular 13.2.2，HTML CSS 支持扩展不起作用。

但是，IntelliSense for CSS class names in HTML 适合我

使用 angular 和 bootstrap 5 beta 找不到 VS 代码 CSS class 选择器

VS code CSS class selector not found with angular and bootstrap 5 beta

visual-studio-code

vscode-extensions

angular

bootstrap-5

更新