vite CSS preprocess doesn't recognize $lib alias in monorepo

[farin]

Describe the bug

When <style> part in svelte component contains import with $lib alias, eg:

<style lang="scss">
  @import '$lib/styles/mixins';
  
  ...
</style>

then VSCode shows error on file

Error in referenced file
Error: Can't find stylesheet to import.
  ╷
2 │   @import '$lib/styles/mixins';
  │           ^^^^^^^^^^^^^^^^^^^^

Although application work fine (and alias is correctly preprocessed by default Vite preprocessor

Reproduction

Default skeleton app is enough, just enable SASS, put one scss file to /src/lib/ and import from any component as described above.

Expected behaviour

No list ./ file validation error.

System Info

• OS: MacOS
• IDE: VSCode

Which package is the issue about?

Svelte for VS Code extension

Additional Information, eg. Screenshots

[jcontonio]

Also seeing this. Confirms this works in the app, just throwing the error in VS Code.

[alimo]

I've answered your question in stack overflow and provided a workaround.
@farin

[uvulpos]

your question in stack overflow

Nowadays it works anyway, no need for the workaround anymore, at least in Sveltekit. But I need a solution, so my whole file is not marked red as error anymore.

I don't think this issue is considered "active" anymore. But the issue still applies

[jasonlyu123]

The issue is about the $lib alias not being recognized in the editor. I am not sure what you meant by "works anyway". The issue is that the VSCode extension/language-server process is running with the process.cwd where you open the editor. And the vite.config.{ts/js} is loaded relative to that. Without the vite config, the SvelteKit vite plugin won't kick in to set up the alias config. If you configure vite-plugin-svelte to load the correct vite config then there would be another problem with loading the svelte.config.js because of the same process.cwd issue.

If you do not intend to use monorepo, you don't have to bother with the config, just open your editor where the package.json is. If you do the easiest solution is to either follow the workaround or manually set a $lib alias.

import { dirname, join } from 'path';
import { fileURLToPath } from 'url';
const __dirname = dirname(fileURLToPath(import.meta.url));
/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: vitePreprocess({
		style: {
			resolve: {
				alias: {
					$lib: join(__dirname, 'src/lib'),
				}
			}
		}
	}),
	
	...
}