Question 1

How to set up svelte-preprocess for TypeScript in Svelte?

Accepted Answer

Install svelte-preprocess via npm, then configure it in svelte.config.js with the TypeScript option enabled. It automatically processes .ts files in script tags, allowing type-safe components without manual preprocessor setup, as shown in the usage examples.

Question 2

Svelte preprocess vs vite-plugin-svelte: which should I use?

Accepted Answer

Use vite-plugin-svelte if you're on Vite, as it has built-in preprocessing for common languages like TypeScript and SCSS. Svelte preprocess is better for non-Vite setups or when you need support for less common languages like Pug or CoffeeScript, as per the 'When to use it?' section.

Question 3

How to apply global styles in Svelte with svelte-preprocess?

Accepted Answer

Add a 'global' attribute to your style tag or use :global rules within your CSS. For :global rules, ensure PostCSS is installed, as svelte-preprocess integrates with it for this feature, detailed in the global style documentation.

Question 4

Does svelte-preprocess work with Svelte 5?

Accepted Answer

Yes, but for TypeScript type features only, Svelte 5 handles them natively, so svelte-preprocess might not be needed. Use it only if you require additional preprocessing like SCSS or Babel transformations, as clarified in the README.

Question 5

Can I use Pug templates with svelte-preprocess?

Accepted Answer

Absolutely, svelte-preprocess has built-in support for Pug. Just set the lang attribute to 'pug' in your template tag, and it will preprocess the markup accordingly, as demonstrated in the built-in support examples.

Question 6

How to import external CSS files in Svelte components?

Accepted Answer

Use the src attribute on the style tag, e.g., . Ensure the path is relative starting with '.', as svelte-preprocess requires this for external file imports to work, noted in the external files feature.

svelte-preprocess

What is svelte-preprocess?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions