Am getting an "Error: Semicolons aren't allowed in the indented syntax" when using svelte with sass

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 → public\build\bundle.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 → public\build\bundle.js...
[!] (plugin svelte) Error: semicolons aren't allowed in the indented syntax.
  ╷
2 │ $primary: hsl(180, 29%, 50%);
  │                             ^
  ╵
  stdin 2:29  root stylesheet
src\App.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.