How to get CSS variable autocomplete from node_modules in VS Code

Other Questions NPM
1

I’m building a web app using Svelte 5 with the carbon-components-svelte library. My project is set up as a multi-folder workspace in VS Code.

I need VS Code to provide autocomplete suggestions for CSS variables that are defined in node_modules/carbon-components-svelte/css/all.css. Right now I have to manually type these variable names which is really annoying.

I already tried a few approaches:

  • Used the svelte.plugin.css.globals setting but it doesn’t work in multi-folder workspaces. I get an error saying it can only be applied when opening the workspace folder directly.
  • Installed the CSS Variable Autocomplete extension but ran into the same multi-folder workspace limitation.

Has anyone found a way to make CSS variable intellisense work with external packages in this type of setup? Any workarounds or alternative extensions that might help?

2

Copy the CSS vars you need into a separate file in your src folder. I do this with Bootstrap vars constantly - works great. Not perfect, but way better than typing everything out manually every time.

3

I encountered a similar problem with external CSS variables. What fixed it for me was creating a dedicated CSS file in the root of my project that imports the desired node_modules CSS file. Specifically, I set up src/globals.css with a rule like @import '../node_modules/carbon-components-svelte/css/all.css';. Then, I adjusted the CSS intellisense settings in VS Code to refer to this newly created file instead of the original node_modules path. This approach effectively resolves the issues that arise from using a multi-folder workspace. Just make sure to adjust the import path based on your specific project structure, and it should work flawlessly across various projects.

4

It’s likely an issue with your workspace configuration. I resolved this by creating a .vscode/settings.json file in each workspace folder rather than relying on global settings. In that file, I included the line "css.customData": ["./node_modules/carbon-components-svelte/css/all.css"] to enable VS Code to access the CSS variables from Carbon. Also, consider switching to the CSS Intellisense extension, as it performs significantly better in multi-folder workspaces compared to the CSS Variable Autocomplete. The key is to provide each folder with its own settings file rather than configuring everything from a single root file.