Am getting an “Error: Semicolons aren’t allowed in the indented syntax” when using svelte with sass

Total
2
Shares

Tried to read the documentation and correct some issues relating to sass. Added "lang=scss" to the component, but not sure how to correct this issue. Any guidance will be helpful.

rollup v2.19.0
bundles src/main.js → publicbuildbundle.js...
[!] (plugin svelte) Error: semicolons aren't allowed in the indented syntax.  â•·
2 │ $primary: hsl(180, 29%, 50%);
  │                             ^
  ╵
  stdin 2:29  root stylesheet

When changing the code to reflect lang="sass", I get the same:

bundles src/main.js → publicbuildbundle.js...
[!] (plugin svelte) Error: semicolons aren't allowed in the indented syntax.
  â•·
2 │ $primary: hsl(180, 29%, 50%);
  │                             ^
  ╵
  stdin 2:29  root stylesheet
srcApp.svelte
Error: semicolons aren't allowed in the indented syntax.
  â•·
2 │ $primary: hsl(180, 29%, 50%);
  │                             ^
  ╵
  stdin 2:29  root stylesheet

Solution

Happened to come across an article:
https://daveceddia.com/svelte-with-sass-in-vscode/

This article showed the component style-tag with type instead of lang.

By changing the lang="scss" to type="text/scss" the issue was resolved.

Leave a Reply

Your email address will not be published. Required fields are marked *