VSCode can't find scss import in Svelte component if path contains $lib alias

Question

Vite preprocess can handle $lib aliases inside component styles. I would like to use

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

  ...
</styles>

which works as expected.

But VSCode with Svelte extension doesn't handle these import and show annoying lint error

Error: Can't find stylesheet to import.

Is there any way to fix it or mute error?

Answer 1

I believe this issue happens in a monorepo.

To work around this problem, define a custom scss importer in the vitePreprocess preprocessor.

Your svelte.config.js file should look something like this:

import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { vitePreprocess } from '@sveltejs/kit/vite';

const dirname = path.dirname(fileURLToPath(import.meta.url));

/** @type {import('@sveltejs/kit').Config} */
export default {
  preprocess: vitePreprocess({
    style: {
      css: {
        preprocessorOptions: {
          scss: {
            importer: [
              (url) => {
                if (url.startsWith('$lib')) {
                  return {
                    file: url.replace(/^\$lib/, path.join(dirname, 'src', 'lib')),
                  };
                }
                return url;
              },
            ],
          },
        },
      },
    },
  }),

  // other options
};