Svelte ist ein Front-End-Framework, der den komplexen Framework-Code in optimierten und einfachen Javascript code Compiliert. Die schreibweise des Code ist sehr ähnlich zu reinen HTML, CSS und JavaScript und ist dank der Compilierung ein sehr schnelles zu schreibendes und effizientes tool zu entwicklung von Nutzeroberflächen.

Voraussetzungen für Svelte:

  • Node.js
  • Vite

Erstellung eines Svelte-Projekte:

  1. Console: npm create vite@latest
  2. Gebe deinen Projekte Namen ein
  3. Wähle Svelte aus
  4. Wähle die Sprache aus mit der du entwickeln willst.
  5. Console: cd „Projekt-Name“
  6. Console: npm install
  7. Console: npm run dev

SCSS nutzen mit Svelte:

Die Folgende Anleitung gilt nur für Svelte nicht für SvelteKit

  • Console: npm install svelte-preprocess sass --save-dev
  • füge dann den <style> Tag in der Svelte-Komponente die Eigenschaft lang="scss" hinzu
  • Konfigurieren Sie Ihren Build-Prozess, um SCSS zu kompilieren. Dies kann durch Hinzufügen von svelte-preprocess zu Ihrer Rollup- oder Webpack-Konfiguration erreicht werden.
<style lang="scss">
  .container {
    display: flex;
    div {
      background: red;
    }
  }
</style>