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 and/or provide additional features not otherwise present.
This chapter assumes that readers interested in adding preprocessing will have some familiarity with Sass, TypeScript, and Markdown. Readers may have also heard of less popular options including CoffeeScript, Pug, Less, PostCSS, and Stylus, but knowing about those is less important because no examples of using them are shown here.
Svelte apps can optionally configure the use of preprocessors that transform the content of .svelte files before they are passed to the Svelte compiler. This is typically specified in the configuration file for the bundler being used, such as Rollup or Webpack.
Examples of preprocessing include:
- Converting Sass syntax to CSS
- Compiling TypeScript code to JavaScript
- Converting Markdown or Pug syntax to HTML
- Custom search and replace
Many npm packages can be used to implement preprocessing. Some examples are identified in the sections below.