ecmel/vscode-html-css

Autocomplete not working for CSS or Bootstrap

Closed this issue · 6 comments

jonathonpday commented

Good Evening,

I am trying to use the extension as explained in previous answers here but for some reason the dropdown of suggested class attributes is not happening either for vanilla css or bootstrap, even after re-installing and restarting.

To be clear my index.html file looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class=""></div>
  </body>
</html>

And my settings.json file contains the requested lines to add the css file and bootstrap:

  "css.enabledLanguages": ["html"],
  "css.styleSheets": [
    "node_modules/bootstrap/dist/css/bootstrap.css",
    "src/**/*.css"
  ]
}

I have added some test classes to my styles.css file but none are prepopulating in the html and nothing for bootstrap either.

I have tried to follow the other solutions here but so far no joy - is there anything I am missing with this?

jonathonpday commented

Also, have tried to downgrade to version 1.14.0 but the issue unfortunately persists.

jonathonpday commented

Ok, have now tried version 1.14.1 and it does appear to be working, but now multiple versions of the same attribute show on the dropdown:

Screenshot 2024-01-27 at 16 40 57
jonathonpday commented

Right - have downgraded to version 1.13.1 and that seems to now work with no issues:

Screenshot 2024-01-27 at 16 45 32
ecmel commented

If you are using cdn, you can try the following settings json as well:

 "css.styleSheets": [
    "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css",
  ]

This way you do not need to install bootstrap npm. Also please use the latest version of the extension.

jonathonpday commented

Thank you!

It worked for the latest version which is great.

The only issue is the stylsheets did not work with the various paths, in the end the only way to get it to work was linking directly:

Screenshot 2024-01-27 at 17 47 08

Is there a better way?

ecmel commented

Yes, for example the following will match all css and scss file under your project's src folder:

"src/**/*.{css,scss}"

Checkout updated docs in README for further configuration options.