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.
13 Answers
Uninstall this extension named "HTML CSS Support" and then reload. It worked for me, I hope it would work for you as well.
I had the same problem. It turned out to be an issue with the same 'HTML/CSS Support' extension mentioned in this answer and this answer. It looks like there have been 7 different releases for that extension in the last few days. v1.3.3 seems to be the latest working version of the extension.
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.
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.
If you are using newer version of HTML CSS Support (>= 1.5.0), you can add the following css.validation settings to your settings.json which should clear this issue. Don't forget to reload VS Code after changing the settings though.
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)
first uninstall HTML CSS support and then reload it And i am 100% sure that it will work actually HTML CSS support sometime checks your HTML CSS code and give error if there is false positive
I am using SCSS as a CSS preprocessor in the Angular project with Bootstrap5. I installed the following plugin and the problem was solved.
Now, using bootstrap 5 and angular 13.2.2, the HTML CSS support extension doesn't work.
However, IntelliSense for CSS class names in HTML works for me
Related