SvelteJS I added preferData to rollup.config.js, but it's ignored by vscode

Question

I added this in rollup.config.js

plugins: [
  svelte({
    preprocess: sveltePreprocess({ sourceMap: !production, scss: {
      prependData: "@import \"./src/scss/app.scss\";"
    }})
  }),
  ...etc
]

app.scss:

$v:red;

one of my svelte files:

value {
  color: $v
}

but vscode showed me this error:

Error: undefined variable

color: $v;

code is working fine, but what can i do to avoid vscode showing me this error?

Answer 1

Assuming you used the Svelte Rollup template, add a svelte.config.js next to your rollup config with the following

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
    preprocess: sveltePreprocess({ scss: {
      prependData: "@import \"./src/scss/app.scss\";"
    }})
};

The Svelte for VS Code extension needs this file to understand what you are using besides Svelte itself in Svelte files. More info here: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/in-general.md