how to use scss in use svelte 3

user_12355606 0
Viewed 7092

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

svelte-3 sass
3 Answers

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

user_145700980

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

user_6443770

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

  1. 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>
  1. Using sass
<style lang="sass">
    .app 
        .app__bin
            h1
                color: red
</style>

Happy hacking with svelte!!

user_129258310
Related