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!

Recent Articles

  1. A gallery of numbered images in four columns
    Article post type

    Choosing a Masonry Syntax in CSS

    What makes something a ‘grid’, and what’s at stake?

    Back in 2020, Firefox released a prototype for doing ‘masonry’ layout in CSS. Now all the browsers are eager to ship something, but there’s a hot debate about the best syntax to use.

    see all Article posts
  2. Article post type

    Partial Feature Queries, Relaxed Layout Containment, and More

    CSS Working Group updates from July

    Over the last month, the CSS Working Group has determined we can loosen containment restrictions for query containers, and agreed on a syntax for special-case support queries (like support for the gap property in a flex context, or support for align-content in a block flow context).

    see all Article posts
  3. A stepped gradient of a pink hue in 2% lightness increments from 100% to 58%, labeled 'spec'
    Article post type

    CSS Working Group Updates for June & July

    What I’ve been working on as an Invited Expert

    The CSS Working Group has regular face-to-face meetings (hybrid online/in-person) throughout the year, and they always result in a flurry of activity! Here’s a rundown of some highlights from the last few months, with a focus on the features I maintain.

    see all Article posts