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.
How to enable the Sass Compiler API in Vite
- Update to Vite version 5.4.0 or above.
- 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.
- 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
.
- 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!
How to enable the Sass Compiler API in Webpack
Webpack’s sass-loader
also has support for the Compiler API.
- Update to sass-loader version 14.2.0 or above.
- Switch from
sass
to sass-embedded
by running npm uninstall sass; npm install -D sass-embedded
.
- In your
webpack.config.js
, set the options.api
to modern-compiler
for
the sass-loader
rule.
...
{
loader: "sass-loader",
options: {
api: "modern-compiler",
},
}
...
Benefits
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!