Svelte 3 не может скомпилировать SCSS

Я хочу использовать SCSS в своем приложении Svelte. Для этого я решил использовать пакет svelte-preprocess. Итак, это компонент App.svelte:

<script>

</script>

<main>
  <h1 class="boom">Hello world!</h1>
</main>

<style type="text/scss">
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;

    .boom {
      color: #ff3e00;
      text-transform: uppercase;
      font-size: 4em;
      font-weight: 100;
    }
  }

  @media (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>

Это список зависимостей внутри package.json файла:

    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "@rollup/plugin-replace": "^2.3.4",
    "node-sass": "^5.0.0",
    "rollup": "^2.34.0",
    "rollup-plugin-css-only": "^3.0.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-serve": "^1.1.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^3.30.0",
    "svelte-preprocess": "^4.6.1"

А это файл rollup.config.js:

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
// import css from 'rollup-plugin-css-only';
import serve from 'rollup-plugin-serve';
import replace from '@rollup/plugin-replace';
import sveltePreprocess from 'svelte-preprocess';

const isDevelopment = process.env.APP_ENV === 'development';

export default {
  input: 'src/index.js',
  output: {
    sourcemap: false,
    format: 'iife',
    name: 'app',
    file: 'public/js/bundle.js'
  },
  plugins: [
    svelte({
      compilerOptions: {
        dev: isDevelopment,
      },
      preprocess: sveltePreprocess(),
    }),

    // css({output: 'bundle.css'}),

    resolve({
      browser: true,
      dedupe: ['svelte'],
    }),
    commonjs(),

    replace({
      IS_DEVELOPMENT: isDevelopment,
    }),

    isDevelopment && serve({
      contentBase: 'public',
      historyApiFallback: true,
      host: '0.0.0.0',
      port: process.env.PORT || 5000,
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
    }),

    isDevelopment && livereload('public'),

    !isDevelopment && terser(),
  ],
  watch: {
    clearScreen: false,
  },
};

Я выполнил инструкции из этого пакета, но когда я пытаюсь создать свое приложение, я получаю эту ошибку в консоли:

rollup v2.34.0
bundles src/index.js → public/js/bundle.js...
[!] Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript)
src/cmp/App/index.css (1:13)
1: main.svelte-1xjph0n.svelte-1xjph0n{text-align:center;padding:1em;max-width:240px;margin:0 auto}main.svelte-1xjph0n .boom.svelte-1xjph0n{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}@media(min-width: 640px){main.svelte-1xjph0n.svelte-1xjph0n{max-width:none}}
                ^
Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript)

Я предполагаю, что это проблема с конфигами накопления или версией какой-то зависимости. Но как это понять и как решить этот вопрос?