SCSS in Svelte not recognized by 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(),
};