Search code examples
csssasssveltevite

Using SCSS in svelte & vite - "Colon is expected"

I recently installed svelte & vite in order to learn the platform, but I can't seem to get any SCSS to compile. Svelte is running just fine, and if I change the SCSS to plain CSS then it works (so svelte and vite appear to running just fine).

I've run the following commands:

npm install svelte-preprocess sass --save-dev
npm i --save-dev sass
npm install svelte-preprocess scss --save-dev
npm i --save-dev scss

My vite.config.js looks like this (yes, both mixins.scss and variables.scss exist at those locations, though I'm not yet using anything from those files)...

export default defineConfig({
  plugins: [svelte({
    preprocess: sveltePreprocess()
  })],
  css: {
      preprocessorOptions: {
          scss: {                                 
              additionalData: `
              @use './src/lib/scss/mixins' as *;
              @use './src/lib/scss/variables' as *;
          `,
          }
      }
  },
  resolve: {
    alias: {
      "@": path.resolve("/src"),
    },
  }
});

And svelte.config.js looks like...

export default {
  preprocess: vitePreprocess()
}

Then I have a component, Header.svelte which contains...

<style type="text/scss">
    header {
      h1 {
        color: red;
      }
    }
</style>

<header>
    <h1>Hello world</h1>
</header>

This is where the error occurs...

enter image description here

What might I have missed?

Solution

  • According to the documentation the tag is wrong. It should be:

    <style lang="scss">

    Also, you maybe should not be using both processors (the one from @sveltejs/kit/vite and svelte-preprocess) at the same time. One should be enough, the latter should have more features as far as I know. Would only set a preprocessor in svelte.config.js, not the vite.config.js.