Warning in VS Code when using Sass with a Svelte component

[ciscoheat]

What version of astro are you using?

1.4.7

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

pnpm

What operating system are you using?

Windows 10

Describe the Bug

When using a Svelte component with Sass styling (<style lang="scss">), I get a warning in VS Code:

Cannot find any of modules: sass,node-sass

Error: Cannot find module 'node-sass'
Require stack:
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-preprocess\dist\modules\utils.js
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-preprocess\dist\autoProcess.js
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-preprocess\dist\index.js
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-language-server\dist\src\importPackage.js
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-language-server\dist\src\lib\documents\configLoader.js
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-language-server\dist\src\lib\documents\Document.js
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-language-server\dist\src\lib\documents\index.js
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-language-server\dist\src\server.js
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-language-server\bin\server.js

The file cannot be parsed because style requires a preprocessor that doesn't seem to be setup or failed during setup. Did you setup a `svelte.config.js`? If you use SCSS, it may be necessary to add the path to your NODE runtime to the setting `svelte.language-server.runtime`, or use `sass` instead of `node-sass`. 

See https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors for more info.

The sass package is installed, which makes everything work, but the warning still persists in VS Code, until I follow the advice and add an empty svelte.config.js file to the Astro project, then after restarting VS Code, it's gone:

svelte.config.js

export default {
  preprocess: null
}

Link to Minimal Reproducible Example

VS Code related, cannot link to Stackblitz.

Participation

• I am willing to submit a pull request for this issue.

[bluwy]

Astro's Svelte integration supports sass ootb by simply installing sass, so no svelte.config.js file is needed. I suppose we need a feature request for https://github.com/sveltejs/language-tools for sass (and others) to work without svelte.config.js by default?

I don't think there's something Astro can change here so closing this for now. We can also update the docs if vscode-svelte can't supported this easily.

[ciscoheat]

@bluwy In the referred issue, an explanation for this was made and a simple fix came up, which is to install the svelte-preprocess package, which I confirmed that it works. Since npx astro add svelte is required to use Svelte anyway, can you add svelte-preprocess to that install script?

[ciscoheat]

@bluwy any updates on this?

[bluwy]

This is tricky. I suppose it used to work in Astro because we have shamefully-hoist for Astro projects. I'm not sure what's the best path either than having svelte-vscode have special handling for @astrojs/svelte or sveltejs/language-tools#1683 (comment). We don't want to have user install svelte-preprocess themselves as it's not quite a good DX.

We have some small discussion about solving preprocessing with the Vite dev server as a whole, so this could be fixed differently soon.

[ciscoheat]

Sounds good, and installing an extra package is a simple fix for now. Thanks for all your work on this!