Skip to main
Article
Three roller bladers in racing gear competing, with a blurred background.

Speeding Up Your Sass Compilation in Vite and Webpack

A quick guide to adopting the modern Sass API

Sass compilation can be a speed bottleneck in your build, but it doesn’t have to be anymore.

Vite comes with built in support for Sass, as well as other CSS preprocessors. Just npm install sass, import a .scss file, and it works.

However, this came with a catch. For every Sass import, a new instance of Sass would spin up, compile, and spin down. If you have a single imported Sass entry point file that imports other Sass files, this isn’t a big deal. But if you’re using Vue’s Single File Components (SFCs) with lang="scss", you were spinning up a new Sass instance for every single SFC.

That can add up.

Earlier this year, OddBird helped Sass add a new Compiler API that allows you to reuse a single instance of Sass for multiple compilations. While you can adopt the new API in your own bespoke Sass compilation setup, we were excited to see the Vite team add support in version 5.4.0.

  1. Update to Vite version 5.4.0 or above.
  2. Switch from sass to sass-embedded by running npm uninstall sass; npm install -D sass-embedded.

Wait – what’s sass-embedded?

Sass is written in Dart. The sass package is transpiled to pure-Javascript, and sass-embedded exposes the same API, but around a native Dart executable. In many situations, sass-embedded is faster.

  1. In your vite.config.js file, set css.preprocessorOptions.scss.api to modern-compiler.
...
css: {
  preprocessorOptions: {
    scss: {
      api: 'modern-compiler',
    }
  }
}
...
Note:

If you’re using the indented syntax, you’ll need to use the sass key instead of scss.

  1. Adjust any options from the legacy API options to the modern API options. In my case, I needed to update pkgImporter to importers: [new NodePackageImporter()] and change the import of NodePackageImporter from sass to sass-embedded.

And you’re done. Now your Vite compilation time should be even faster!

Webpack’s sass-loader also has support for the Compiler API.

  1. Update to sass-loader version 14.2.0 or above.
  2. Switch from sass to sass-embedded by running npm uninstall sass; npm install -D sass-embedded.
  3. In your webpack.config.js, set the options.api to modern-compiler for the sass-loader rule.
...
{
  loader: "sass-loader",
  options: {
    api: "modern-compiler",
  },
}
...

The benefit here is going to be very project-dependent. In our codebases, we saw vite build times improving from ~4.7s to ~3.9s in a smaller project, and from ~5.9s to ~3.8s in a larger project. Others have seen up to an 8x speed improvement. Incremental dev builds should also be faster.

Let us know what kind of speed improvements you see in your projects!

Posts about Sass

  1. Vivaldi podcast cover art with Bruce Lawson and Miriam
    Podcast post type

    Cascade Layers, Container Queries, Scope, and More

    I chat with Bruce Lawson about all things CSS. We geek out over the latest and greatest features like Cascade Layers, @Scope, Mixins, and Container Queries – exploring how these features impact web design.

    see all Podcast posts
  2. Title card from the podcast with headshots of Kevin and Mia
    Podcast post type

    Getting more involved with CSS

    Kevin and I chat about getting involved with the development of the CSS language, from following along to opening issues, or even joining the CSS Working Group.

    see all Podcast posts
  3. Indoor plants in pots on a floating shelf
held up by brackets.
    Link post type

    Sass Indented Syntax Improvements

    Bringing SCSS flexibility to .sass files

    The Sass indented format is getting more flexible with the ability to have multiline statements, semicolons, and more.

    see all Link posts