No intellisense when `@use`ing Sass modules
See original GitHub issueDescribe the bug
@use
ing a Sass module doesn’t provide intellisense in Svelte for VS Code.
Reproduction
- Create a skeleton app with SvelteKit,
cd
into it, and install dependencies:yarn create svelte sass-intellisense-reproduction && cd sass-intellisense-reproduction && yarn
- Add Sass as a devDependency:
yarn add -D sass
- Create a Sass partial to import as a module:
// src/styles/_variables.scss
$font-size-base: 80px;
- 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>
- 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:
And the correct usage (after uncommenting the variable) doesn’t throw an error, as expected:
Expected behaviour
I expect to get intellisense of each of the @use
ed 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:
- Created a year ago
- Comments:5 (2 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I just have installed the
SomewhatStationery.some-sass
extension and it looks promisingThe 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: