Svelte "vite-plugin-svelte" preprocess failed in CI

By Kaveh Alemi·Latchkey

vite-plugin-svelte ran the configured preprocessors over a component and one of them threw. The usual cause is a lang block (SCSS, TypeScript, PostCSS) whose toolchain is missing from the build job.

What this error means

A vite build fails inside vite-plugin-svelte while transforming a .svelte file, often with "Cannot find module 'sass'" or "Could not load the preprocessor".

[vite-plugin-svelte] /src/lib/Card.svelte:12:1 Failed to process the file
Error: Preprocessor dependency "sass" not found. Did you install it?
    at Object.transform (vite-plugin-svelte)

Common causes

A preprocessor dependency is not installed

A <style lang="scss"> block needs sass; if it is a devDependency that CI pruned or never installed, the preprocess step fails.

svelte-preprocess is misconfigured

The preprocess entry in svelte.config.js references a transformer whose package is absent, so loading the preprocessor throws.

How to fix it

Install the missing preprocessor

1. Read which preprocessor the error names (sass, less, postcss).
2. Add it to dependencies and install in the build job.
3. Re-run the build.

npm install -D sass
npm run build

Match config to installed packages

Ensure every transformer referenced in svelte.config.js has its package installed.

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
export default { preprocess: vitePreprocess() };

How to prevent it

• List every preprocessor (sass, postcss) in package.json so a full install provides it.
• Run the build in CI on every PR to catch a missing preprocessor early.
• Keep svelte.config.js preprocess entries in sync with installed packages.

Frequently asked questions

Related guides

References

• Node.js documentation
• npm CLI documentation
• GitHub Actions documentation