CODEWITHSUNDEEP
csssasssveltesvelte-3sveltekit
FARZAD
FARZAD

Reputation: 85

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

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

Upvotes: 2

Views: 1373

Answers (1)

Jason Holtzen
Jason Holtzen

Reputation: 348

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

Upvotes: 1

Related Questions