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

user_12216137 0
Viewed 467

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;

enter image description here

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

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

enter image description here

sveltekit svelte-3 svelte sass css
1 Answers

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 *;'
            },
        })
    ]
};
user_50714090
Related