SCSS in Svelte not recognized by Visual Studio Code - visual-studio-code

Question

VSCode does not recognize the scss that I include within a svelte file. It thinks they are css styles and, the first nesting css that it meets, gives me error.
I tried to disable the validation of the css in the settings through but it doesn't seem to have any effect: "css.validate": false,
The svelte application works correctly, either by launching it locally or by compiling the bundle for production (it's not a problem of my code).
It's just a problem with how VSCode controls my styles. For this problem, most of my svelte components seem wrong even if they are not really.
To compile styles like scss I include the attribute type="text/scss" to the tag:
<style type="text/scss">
All errors have code: "css-syntax-error".
I think that the reason is because VS Code doesn't recognize that it's SCSS and not CSS.
I have these extensions for sass in svelte:
SCSS IntelliSense
Beautify css/scss/sass/less
Live SASS Compiler
Svelte plugin 0.9.3
My VSCode settings:
{
"svelte.language-server.runtime": "......",
"scss.lint.important": "warning",
"editor.formatOnPaste": true,
"css.completion.triggerPropertyValueCompletion": false,
"css.completion.completePropertyWithSemicolon": false,
"css.lint.argumentsInColorFunction": "ignore",
"css.lint.hexColorLength": "ignore",
"css.lint.duplicateProperties": "warning",
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"workbench.colorTheme": "Material Theme Darker",
"css.validate": false,
"editor.codeActionsOnSave": {},
"git.enableSmartCommit": true,
"css.fileExtensions": [
"css",
"scss"
],
"beautify.options": {
},
}

Answer 1

From the error it seems that the preprocessing of your svelte file failed. You need a svelte.config.js at the root of your project. The Plugin uses this to preprocess files.
If you use this preprocessor plugin for svelte https://github.com/kaisermann/svelte-preprocess , setting it up is as easy as this:
svelte.config.js:
const sveltePreprocess = require("svelte-preprocess");
module.exports = {
preprocess: sveltePreprocess(),
};