question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

No intellisense when `@use`ing Sass modules

See original GitHub issue

Describe the bug

@useing a Sass module doesn’t provide intellisense in Svelte for VS Code. image

Reproduction

  1. Create a skeleton app with SvelteKit, cd into it, and install dependencies: yarn create svelte sass-intellisense-reproduction && cd sass-intellisense-reproduction && yarn
  2. Add Sass as a devDependency: yarn add -D sass
  3. Create a Sass partial to import as a module:
// src/styles/_variables.scss

$font-size-base: 80px;
  1. Add styles to src/routes/index.svelte:
<!-- src/routes/index.svelte -->
<h1>Welcome to SvelteKit</h1>
<p>
	Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
</p>

<style lang="scss">
	@use '../styles/variables' as vars;

	:root {
		font-size: vars. // activate intellisense here
	}
</style>
  1. Active your VSCode intellisense at the end of the partially written line font-size: vars. to get the behavior seen in the “Describe the Bug” image

Note that the correct usage of Sass modules is still detected and errors are shown. E.g. if you take the above reproduction and comment out the variable in src/styles/_variables.scss, effectively making it an empty module, you’ll properly get an error: image

And the correct usage (after uncommenting the variable) doesn’t throw an error, as expected: image

Expected behaviour

I expect to get intellisense of each of the @useed Sass module’s members.

System Info

  • OS: macOS 12.4
  • IDE: VSCode 1.68.1
  • Extension: svelte.svelte-vscode v105.17.0

Which package is the issue about?

Svelte for VS Code extension

Additional Information, eg. Screenshots

I may be misunderstanding the “Autocompletions” feature listed, but I assumed that would cover intellisense.

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
ivanhofercommented, Sep 28, 2022

I just have installed the SomewhatStationery.some-sass extension and it looks promising

1reaction
MilesWellsSVTcommented, Jul 7, 2022

The vscode-scss extension appears to be unmaintained (author lives in Russia ☹️). There is a PR to add Svelte support. I forked this fork to also fix the double $ problem.

With that, here’s my workaround:

  1. clone https://github.com/MilesWellsSVT/vscode-scss
  2. use vsce to build it locally
  3. install the extension manually using the resulting .vsix file.
Read more comments on GitHub >

github_iconTop Results From Across the Web

Intellisense not working in sass/scss files for mixins when ...
In my scss file, for example: @import '~foundation-sites/scss/foundation'; @include foundation-everything($flex: true); I get a squiggly line in the editor ...
Read more >
vs code and intellisense for CSS Grid and CSS Modules
I get an error saying composes "unknown property" for composes. Plus I am using css grid and there does not seem to be...
Read more >
Sass intellisense for @extend using @import - CodeProject
I get intellisense for all other things i import like variables and mixins. Also it does compile and work fine but no intellisense....
Read more >
Get the most out of CSS Modules with TypeScript in 5 minutes
If you're a TypeScript Dev, here are a few things you can do to get that sweet, sweet CSS class intellisense.
Read more >
CSS IntelliSense for imported node_module – Rider Support
In a React app I'm using Bootstrap for styling. ... style.scss'; ... Sometimes it is not imported in the exact component but somewhere...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found