Fix Vite: Preprocessor dependency "sass" not found

TL;DR#

Vite can process SCSS, but the Sass compiler must be installed in the project. Having a webpack loader named sass-loader does not establish that a compiler is available. Add the local sass dependency with dev dependencies included, restart Vite, and retry the same stylesheet. If the error names sass-embedded, Vite also documents sass as an alternative. Do not rebuild your Tailwind configuration until the missing-compiler error is gone.

The original Stack Overflow question reports this while moving an old Nuxt project to Vite:

[plugin:vite:css] Preprocessor dependency "sass" not found. Did you install it?

The question also mentions a separate browser error and several attempted installations, without enough configuration to establish that project's complete cause. The reproduction below isolates the Vite compiler dependency in a small JavaScript project. It does not claim to reproduce the historical Nuxt setup or its browser failure.

Why it happens#

Vite's preprocessor documentation distinguishes built-in integration from an installed compiler. It supports Sass file extensions without an additional Vite plugin, but asks you to install the corresponding preprocessor. Its installation example offers either of the Sass implementations discussed here.

The similarly named loader belongs to another toolchain. The webpack Sass loader documentation describes a loader that turns Sass into CSS and also requires a Sass implementation. Installing that loader alone is therefore an incomplete dependency check. A webpack configuration may need a loader chain; a Vite configuration does not acquire such a chain merely because the package appears in its manifest.

The name in the error also needs careful reading. In the Vite source used for this reproduction, the resolver tries the embedded implementation before the JavaScript implementation. If neither resolves, it reports the first failure. That explains why the modern error below names the embedded package although the successful correction installs the other supported compiler.

A loader present, a compiler absent#

The test ran on 4 November 2026 in an isolated official node:22-slim Docker container, with Node 22.23.4, Vite 8.3.5 and sass-loader 17.1.0. A plain HTML entry loaded a JavaScript file which imported this stylesheet:

$brand: #256240;
.demo {
  background: $brand;
}

The loader was installed before the first run. Neither Sass implementation was installed. Vite's build failed, and requesting that stylesheet from the dev server returned an error response. The build diagnostic included:

Error: Preprocessor dependency "sass-embedded" not found. Did you install it? Try `npm install -D sass-embedded`.

Only the local compiler dependency was then added: sass 1.107.1. The stylesheet, JavaScript import, loader and Vite settings stayed the same. Both build and development processing succeeded; restarting the probe preserved the result:

PROBE after
BUILD PASS contains background: #256240=true
DEV stylesheet HTTP=200 contains background: #256240=true
BUILD_RESULT=true
Restart same probe without further change
PROBE restarted
BUILD PASS contains background: #256240=true
DEV stylesheet HTTP=200 contains background: #256240=true
BUILD_RESULT=true

Those checks inspected generated CSS and the dev server response. They did not render a browser or measure the original project's hot-reload speed. They prove the dependency distinction: an installed loader did not prevent the failure, and an installed compiler was sufficient for this fixture.

Fix#

1. Inspect the project that actually starts Vite#

Open the directory containing the application's package manifest and inspect the installed implementations:

npm ls sass sass-embedded

An empty result means neither implementation appears in that dependency tree. A manifest entry alone is not the same as an installed package: the install may have failed, been skipped or omitted build dependencies. If the entire dependency directory is absent after cloning the repository, start with the missing node_modules installation check before treating this as a Sass configuration defect.

Also confirm which build fails. A browser runtime stack mentioning an unavailable global is a different observation from a preprocessor failing to load its compiler. Fix the first compiler failure, then collect any remaining error independently. Closing the development overlay does not make the stylesheet compile successfully.

2. Install one local compiler#

For the correction verified above, run:

npm install --save-dev --include=dev sass

Vite documents this implementation as an alternative to the embedded compiler. The npm installation reference documents saving a dev dependency and explicitly including dev dependencies. Including them matters when an existing installation policy would otherwise omit the package you just requested.

Keep the resulting manifest and lockfile change together. A globally installed compiler does not reproduce a project's dependency tree on a fresh machine. The important result is a compiler available to the application that runs the build, rather than another unrelated package whose name contains Sass.

3. Restart the development process and rebuild#

Stop the application's current dev process, then start its usual script again:

npm run dev

Retry the same page and stylesheet import. Avoid changing the stylesheet and dependency configuration simultaneously: if both change, a successful result no longer tells you which change mattered. Once development processing succeeds, run the build verification below against that same source.

Do not add a webpack rule merely to satisfy Vite. If a separate webpack-based Storybook also exists, it has its own pipeline and should be diagnosed separately; its loader requirements are not evidence that the Vite application needs the same configuration.

Verify the fix#

Check the installed compiler again, then build:

npm ls sass sass-embedded
npx vite build

Both commands ran successfully after the correction in the container. The generated stylesheet contained the compiled background colour rather than the Sass variable. Check an actual declaration your own stylesheet uses; a successful build of an entry that never imports the failing file would not verify that file.

For development, load the affected page and inspect its stylesheet request. The isolated probe received a successful response containing the same compiled declaration. For your application, also check its browser console for any remaining runtime error; this reproduction did not establish the cause of the separate browser error mentioned in the question.

When CI removes a compiler that works locally#

A compiler recorded only as a dev dependency can disappear when installation omits that class of dependency. npm documents the production-dependent omit default and the overriding include option. Run the dependency installation with build dependencies available in the stage that compiles your assets.

With a committed lockfile, npm ci installs the recorded project rather than repairing an uncommitted manifest change. The equivalent inclusion setting for that build stage is:

npm ci --include=dev

This is documentation-based CI guidance; the container test above used a local installation, not a hosted CI service. If Vite itself vanishes before the stylesheet is even reached, the Vite package missing after dev dependencies were omitted walkthrough diagnoses that earlier failure. Adding a compiler cannot repair an installation in which the build tool itself is absent.

Tailwind v4 is a separate CSS pipeline decision#

The source question predates the current Tailwind setup. Tailwind's compatibility guidance says its current major version is not designed to be used with Sass, Less or Stylus. Installing a missing compiler makes an SCSS file processable; it does not make a Tailwind entry written for a different pipeline correct.

Keep that entry in plain CSS and use the integration documented for the chosen Tailwind version. If the next build error says you are using the core Tailwind package directly as a PostCSS plugin, continue with the Tailwind PostCSS plugin relocation fix. That is a plugin selection error, with a different correction from the missing compiler established here.

The useful stopping point is specific: the same imported SCSS now compiles in development and in the build, with the intended declaration present. Only then investigate a remaining Tailwind, framework or browser error on its own evidence.