Up and running

[JonasFocke01]

Hello everyone,

this ui looks supercool and i realy want to use it! However i have problems getting it to work propperly. The components work totaly, no problems there, but i cant overwrite the default scss variables. I followed your guide for that, but it wont work. The assumption seems obvious, that it has to do with the "svelte.config.js" part of it. My project spills errors when i put that in there. Putting the code into the rollup.config.js solves the errors but wont bring me closer to my goal. Or am I doing something obvious wrong by writing wrong stuff into the theme.scss file? Here is what i wrote in there: @forward '~attractions/_variables' with ( $main: rgb(216, 196, 14), $button-radius: 0, $font: "'Open Sans', sans-serif" );

I hope you can help me fix this issue. I can totaly see me adding "pull request to this repo" to my bucket list.

[aabounegm]

The positive feedback is appreciated 😁. Can you please share more details so we can figure out the problem? What errors does it spill? How does your svelte.config.js look like (and rollup.config.js as well, for that matter)?

[JonasFocke01]

Rollup:

import svelte from 'rollup-plugin-svelte';
const svelteConfig = require('svelte.config.js');// wont work with CommonJS nor ES6 style

export default {
  // ...,
  plugins: [
    svelte({
      preprocess: sveltePreprocess(),
      ...svelteConfig
      // ...,
    })
  ]
};

svelte.config:

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
const path = require('path');

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: preprocess(),

  kit: {
    adapter: adapter()
  }
};

Error is: require is not defined in ES module scope, you can use import instead This file is being treated as an ES module because it has a '.js' file extension and '/home/jonas/repos/Kundenportal/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

[aabounegm]

I'm confused. Are you using SvelteKit or just plain Svelte? The use of Rollup implies that you are using just plain Svelte, while the configuration in your svelte.config.js implies that you are using SvelteKit.