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

Question

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.

score 67 · Accepted Answer · answered Dec 27 '20 at 06:09

67

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

answered Dec 27 '20 at 06:09

Prashant Srivastava

732
5
4

2

I just reloaded VS Code because the extension was updated automatically and just needed a reload. – DemiA Dec 27 '20 at 20:34
9

Issue was still present after reload for me in an eleventy project that used a CSS framework from node_modules. I tried other answers that were given here but to no extent. I finally fixed it by downgrading the 'HTML CSS Support' extention to v1.3.3 – Thibault Fouquaert Dec 28 '20 at 10:54
1

Yes, they have added css validations in version [1.5.0] , that might me in beta state... – Prashant Srivastava Dec 29 '20 at 15:45
I was getting the message "CSS class selector 'text-muted' not found". Excellent thanks. – Ramiro Jan 03 '21 at 03:28

score 11 · Answer 2 · answered Dec 28 '20 at 21:37

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.

score 6 · Answer 3 · answered Dec 30 '20 at 11:55

6

Reverted to v1.3.3 of 'HTML/CSS Support' extension until sorted Works on my machine

answered Dec 30 '20 at 11:55

EltonFlow

101
2

DemiA · Answer 4 · 2020-12-28T13:02:17.633

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.

edited Dec 28 '20 at 13:02

answered Dec 27 '20 at 20:32

DemiA

333
1
11

2

not working all the time, just turn the validation off in your vscode settings.json. Add this at the end of the file `"css.validation": { "id": false, "class": false }` – Leccho Jan 05 '21 at 15:21
1

It's bad that we have to do that thought. The extension should explore all css/scss file for your workspace. – Leccho Jan 06 '21 at 18:07

score 3 · Answer 5 · answered Dec 27 '20 at 05:04

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.

score 3 · Answer 6 · answered Jan 04 '21 at 23:35

3

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.

answered Jan 04 '21 at 23:35

pa1_tja

71
1
7

score 3 · Answer 7 · answered Jan 05 '21 at 13:36

3

Downgrading the 'HTML CSS Support' extention to v1.3.3 will fix the problem.

answered Jan 05 '21 at 13:36

Yastars

31
2

score 2 · Answer 8 · answered Dec 28 '20 at 07:48

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)

score 2 · Answer 9 · answered Jan 01 '21 at 10:41

2

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

answered Jan 01 '21 at 10:41

user14922155

21
1

score 2 · Answer 10 · answered Jan 18 '21 at 05:19

2

Issue with extension "HTML CSS Support" Uninstall it or use an older verions.

answered Jan 18 '21 at 05:19

score 1 · Answer 11 · answered Sep 11 '21 at 10:13

1

I am using SCSS as a CSS preprocessor in the Angular project with Bootstrap5. I installed the following plugin and the problem was solved.

SCSS Everywhere

answered Sep 11 '21 at 10:13

Meysam Sahragard

304
2
4

score 0 · Answer 12 · answered Feb 12 '22 at 17:35

0

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

answered Feb 12 '22 at 17:35

Kyrolus Kamal Fahim Sous

698
1
8
9

score -1 · Answer 13 · edited Dec 28 '20 at 23:46

-1

Just turn off CSS validation in settings.json.

edited Dec 28 '20 at 23:46

Gino Mempin

25,369
29
96
135

answered Dec 28 '20 at 13:08

Taras Savchun

29
1

it's works for me, and don´t need uninstall the extension – Dener Rocha Jan 02 '21 at 13:16

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

13 Answers13

Update

Linked