Use scss in the <style> tag

[uitcode]

How can I use scss in style tags of .svelte files?

[kaisermann]

@uitcode You need to configure your project's preprocess step: https://svelte.dev/docs#svelte_preprocess

There are some packages that can help you setting up scss to work with svelte:

• https://github.com/kaisermann/svelte-preprocess
• https://www.npmjs.com/package/svelte-preprocess-sass

[kulturbande]

I know it is an aged issue, but I had a similar problem with Typescript and LESS. If you going to use 'svelte-preprocess' you have the possibility to this to support all common preprosseses:

const autoPreprocess =  require('svelte-preprocess');
...
module: {
    rules: [
      ...
      {
        test: /\.(html|svelte)$/,
        exclude: /node_modules/,
        use: {
          loader: 'svelte-loader',
          options: {
            preprocess: autoPreprocess(),
          },
        },
      },
  ...
  ]
}

[JohnnyFun]

I wonder if the svelte-loader should accept a string tell it how to import your svelte.config.js instead or whatever file you define your preprocessor in?

Looks like webpack@5.47.0 doesn't pass over function values in options, so when I debug into svelte-loader autoPreprocess() just ends up with the what appears to be only the serializable values (i.e. defaultLanguages), but no markup, script, and style.

[JohnnyFun]

I added this to svelte-loader index.js:

if (options.svelteConfigFileLocation) {
    const svelteConfig = require(options.svelteConfigFileLocation)
    options.preprocess = svelteConfig.preprocess
}

Then modified my webpack to pass svelteConfigFileLocation: path.resolve('../svelte.config.js') instead of preprocess: autoPreprocess().

[mcuppi]

@dummdidumm; The original question has been answered so I would recommend closing this issue. Based on the discussion here, it might be worth creating another issue focused on loading a configuration file (svelte.config.js).