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

问题

I'm using bootstrap 5 with angular, and I add style and script to angular.json but the problem in VS Code It does not recognize the bootstrap classes
Thanks

回答1:

Uninstall this extension named "HTML CSS Support" and then reload. It worked for me, I hope it would work for you as well.

回答2:

Install this extension https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

Then in your .vscode/settings.json:

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

Restart vscode. Worked for me.

回答3:

As said by others, uninstall the HTML CSS Support then reload VS code. You can use IntelliSense for CSS class names in HTML if you want, it provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element. And gives you autocompletion for CSS class definitions that can be found in your workspace (defined in CSS files or the in the file types listed in the Supported Language Modes section)

回答4:

Check if extension "HTML CSS Support" got auto-updated. If it did, then it will ask for reloading of VS Code. Do it. Had exactly same issue today.

Update

That did not help.

Looks like the issue should have been solved with the next release of the extension, but still, some of the Problems are there. Check the github: https://github.com/ecmel/vscode-html-css/issues

In short, what you need to do is go to VS Code settings and switch from "User" to "Workspace". Then type "css settings" in settings search bar and open the exact same option under "Extensions". Click "CSS: Style Sheets", which will open settings.json for workspace and add your CSS files paths there. Hopefully it will solve all the Problems for you.