how to use scss in use svelte 3 - sass

Question

I'm trying to use scss in svelte 3, i've done the steps placed in this post:
scss guide in svelte 3
but i keep receiving a syntax error
"Colon is expectedsvelte(css-syntax-error)"
in code like this:
<style type="text/scss">
#container {
display: flex;
/*error in the div below*/
div {
background: red;
}
}
i've prettier setup too, but i don't think it's related

Answer 1

Node-sass is now deprecated, so above still applies but can just be
npm install svelte-preprocess sass --save-dev instead :)

Answer 2

To add support for scss, you'll need add a pre-processor like svelte-preprocess
npm install svelte-preprocess node-sass --save-dev
In rollup.config.js:
import sveltePreprocess from 'svelte-preprocess';
and then under
plugins: [
svelte({
...,
preprocess: sveltePreprocess()
}),
and restart the server.
To enables scss support in vscode create a svelte.config.js file:
const sveltePreprocess = require('svelte-preprocess')
module.exports = {
preprocess: sveltePreprocess(),
}
And restart vscode

Answer 3

When you are using svelte-kit to create your svelte application, you don't need to change then svelte.config.js because it is already set up and it looks as follows:
import adapter from '#sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
/** #type {import('#sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),
kit: {
adapter: adapter()
}
};
export default config;
All you have to do is to install sass using your package manager as follows:
yarn add -D sass
# or using npm
npm i --save-dev sass
And boom!! you will be able to style your components using sass or scss by just changing the attribute value for lang to either sass or scss
using scss
<div class="app">
<div class="app__bin">
<h1>Hello world</h1>
</div>
</div>
<style lang="scss">
.app {
.app__bin {
h1 {
color: red;
}
}
}
</style>
Using sass
<style lang="sass">
.app
.app__bin
h1
color: red
</style>
Happy hacking with svelte!!