How to solve SvelteKit/Svelte <style> tag with squiggly line not recognising CSS @import

Question

As the title suggests, I have been struggling to find a solution to this squiggly line problem as part of in my Svelte files.

I have looked all over the web and unforturnately I haven't yet being able to find a solution to this error in my VS Code editor.

Please note that despite this error, the imported CSS file is cascading the variables fine and all works fine, however VS Code isn't able to recognise the lang="scss" hence the squiggly line as per screenshot.

NOTE: The imported CSS file is prepended via Svelte's preprocess configs;

Here is a link to the repo holding all the configs and codes;

https://github.com/Untested/demo-svelte

Answer 1

My svelte.config.js (for SvelteKit) has the following and it all resolves well, leaving no squiggles. Note that if you're using vanilla Svelte (not SvelteKit), it may be configured differently.

const config = {
    kit: {
        adapter: adapter(),
        vite: {
            css: {
                preprocessorOptions: {
                    scss: {
                        additionalData: '@use "src/variables.scss" as *;'
                    }}},
            resolve: {
                alias: {
                    ...
                }}}
    },
    preprocess: [
        preprocess({
            scss: {
                prependData: '@use "src/variables.scss" as *;'
            },
        })
    ]
};