Svelte and Sapper in Action

20 Preprocessors

This chapter covers

• Custom preprocessing
• Using svelte-preprocess and its auto-preprocessing mode
• Using Sass instead of CSS
• Using TypeScript instead of JavaScript
• Using Markdown instead of HTML
• Using multiple preprocessors
• Image compression as a preprocessing step

By default, Svelte and Sapper only support using JavaScript, HTML, and CSS. Preprocessors enable the use of alternate syntaxes for these files that can simplify writing the code or provide additional features not otherwise present.

This chapter assumes that if you’re interested in adding preprocessing, you will have some familiarity with Sass, TypeScript, and Markdown. You may have also heard of less popular options such as CoffeeScript, Pug, Less, PostCSS, and Stylus, ...