Cannot find any of modules: sass,node-sass

[hyrious]

Describe the bug

The same as #622, but I can not get over it.

To Reproduce

I didn't use svelte-preprocess and/or svelte.config.js. I'm using the @sveltejs/vite-plugin-svelte and let vite handle the preprocessing through useVitePreprocess option.

In fact, this plugin works well and vite does not complain about it. But vscode does not think so, it throws error on <style lang="scss"> tag about not founding "sass" or "node-sass" package.

I've created a reproduction repo: https://github.com/hyrious/vite-svelte-sass-bug.

I have tried these steps but no luck:

• add svelte.language-server.runtime option
• install sass both in the project and in global

Expected behavior

The extension should be able to find the sass module.

Screenshots

System (please complete the following information):

• OS: macOS 12.0.1
• IDE: VSCode
• Plugin/Package: Svelte for VSCode, svelte-language-server

Additional context

[hyrious]

Update: the solution seems to be install svelte-preprocess.

[dummdidumm]

My guess: We try to read a svelte.config.js and read the preprocessor from that by looking up the preprocess field. If that fails or there is no config (according to your description that's the case here), we fall back to using svelte-preprocess. But that package is inside the extension folder, so if it comes across a tag where preprocessing is needed, it'll start searching for SASS (in this example) or other packages starting from the extension folder - and SASS isn't in there, so it fails.
I'm not sure what the best way forward here would be.

[jasonlyu123]

Yeah. my assumption is the same. Ideally, it probably should have a svelte.config.js in this case. As we can't read the preprocess config from the vite config. Maybe vite-plugin-svelte should expose their vite preprocessor so that it could be used in the svelte.config.js. But I don't know if they want to make it a public API, it does increase the maintenance burden.

Installing svelte-preprocess would work but it's a "workaround" instead of "fix". Having to install `svelte-preprocess kind of defeats the purpose of using the preprocessor of vite. And might introduce some potential inconsistency between IDE and build.

[hyrious]

IMHO, the extension does not need to use exactly the same svelte-preprocess and preprocessors. You can bundle (add them to dependency) SASS (and less, stylus, etc.) into your extension to make it work in the vite situation.

To get vite preprocessors from that plugin is not an easy work. Because it takes the vite:esbuild and vite:css plugin instance at the server runtime from the plugin context provided by vite server. You cannot do the same thing out of vite.

[dummdidumm]

I'm very hesitant to add any other dependencies solely for preprocessor diagnostics. Right now Less and SASS seem like a good addition, but with the rise of TailwindCSS people might expect something there, too, and over time it could become too bloated, and removing already added stuff is then somewhat of a breaking change. Therefore I'd like to keep this to TypeScript-only for now. Maybe we should instead switch how we deal with these diagnostic errors?

• Option 1: ignore errors that come from missing modules if there's no svelte.config.js
• Option 2: same as option 1 but print a warning with more explanation instead. For svelte-check, this could be a one-time when it's first encountered to not clutter up diagnostics.

What do others think about this?

[damevin]

Up please ! 👋

[Lucide]

I'm hitting a related issue as well, but I'm using svelte-preprocess with rollup, and sass-embedded. The extension complains, but the build itself succeeds, as rollup.config.js contains

import sass from "sass-embedded";
//....

svelte({
	preprocess: [
		sveltePreprocess({
			sourceMap: !production,
			scss: {
				implementation: sass
			}}),

I'm using no svelte.config.js.
Is this the same case as above or I'm missing a simpler solution?

[jasonlyu123]

@Lucide That's unrelated to this issue. In your case, You need a svelte.config.js as the language server also need to know how to preprocess. And we can't read the config passed into rollup-plugin-svelte in your rollup config.