CODEWITHSUNDEEP
sasssvelterollupsvelte-3
Vitalii
Vitalii

Reputation: 43

Svelte 3 can't compile SCSS

I want to use SCSS in my Svelte application. For this purpose I decided to use svelte-preprocess package. So, this is the App.svelte component :

<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>

This is the list of dependencies inside of package.json file:

    "@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"

And this is the rollup.config.js file:

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,
  },
};

I followed instructions from that package, but when I try building my application I get this error in the console:

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)

I guess it's a problem with rollup configs or version of some dependency. But how to understand it and how to solve this issue?

Upvotes: 1

Views: 2163

Answers (2)

Matteus Barbosa
Matteus Barbosa

Reputation: 2735

You need to update your svelte.config.js file

import { vitePreprocess } from '@sveltejs/kit/vite';

export default {
  preprocess: [vitePreprocess()]
};

Check the documentation for details

Upvotes: 0

Stephane Vanraes
Stephane Vanraes

Reputation: 16411

The issues lies in you commenting out the line css({output: 'bundle.css'}), in rollup.config.js, with the line present everything works.

Upvotes: 1

Related Questions