Allow sass CLI for better performance

[pbowyer]

Full credit to https://github.com/snowpackjs/snowpack for this idea.

The current sass compiler is written in Dart (hereafter "Dart Sass"). Dart Sass's stand-alone command-line executable uses the blazing-fast Dart VM to compile stylesheets. Dart Sass is also distributed as the pure JavaScript sass package on npm, which Webpack Encore uses. The pure JS version is slower than the stand-alone executable - 9x slower for this StackOverflow test.

Snowpack's Sass plugin allows you to install the Dart Sass command-line executable and use that instead of the npm package. The code is fairly straightforward.

Usually I like to quantify the change, but I haven't worked out how to benchmark the speed-up this would give me. With Webpack (Encore) my sass compilation is between 20-30 seconds on first run (which is 5+ seconds longer than when I used libsass) so any reduction is good.

Is this an addition Webpack Encore would support?

[Kocal]

Hi 👋

This is a really interesting idea since compiling .sass files can be very slow sometimes.

Encore handle .sass files with the help of sass-loader, so implementing native binary support should be done on their side and not on Encore (we alreay provide a method to configure the sass-loader), or just small updates...

Any optimization is important since it can reduces compilation time when developping, building your app in CI, or deploying your application in production.

[pbowyer]

Thanks for the quick response.

Checking the sass-loader repository they have an issue for this webpack-contrib/sass-loader#774 open since... 2019. Their code already interweaves node-sass and dart-sass throughout so adding a third way looks a nightmare.

[stof]

Well, the sass team is working on embedded dart-sass, which will run the dart executable in a subprocess. And it will be exposed through the same JS API. So once this work is ready (currently it is in progress), it should be usable in sass-loader.

[leonexcc]

The sass-embedded ist now usable since sass-loader version 12.5.0 (see https://github.com/webpack-contrib/sass-loader/releases/tag/v12.5.0). But Encore puts out the error message:

Error: Install sass (or node-sass) to use enableSassLoader()
      yarn add sass --dev

This can be fixed by adding { name: 'sass-embedded' } to

webpack-encore/lib/features.js

Line 24 in 9e1528e

[{ name: 'sass' }, { name: 'node-sass' }]

Also the library has to be activated manually:

.enableSassLoader((options) => {
    try {
        require.resolve('sass-embedded');
        options.implementation = 'sass-embedded';
    } catch (ignoreError) {
        // Fallback to default implementation (sass or node-sass)
    }
})

And there are some known bugs webpack-contrib/sass-loader#774 (comment)

[leonexcc]

As of version v12.6.0 of sass-loader the sass-embedded will be detected automatically and a simple .enableSassLoader() will work

[curry684]

I can confirm in my case simply applying the fix to line 24 and installing sass-embedded improves performance by 400%. For my project this is the difference between hot reload being usable or not.

#1097 should be merged and released asap :)

[pbowyer]

@curry684 Nice results! I've tried a few times but so far can't resolve Bootstrap with either ~ or ../node_modules/... so waiting on webpack-contrib/sass-loader#774 (comment) being resolved before I try again.

[curry684]

Note that is IS usable today if you follow the guide above at #1011 (comment)

You need to keep sass installed to please the validator, and if it is installed sass-loader will by default still prefer it over sass-embedded. So set options.implementation for now explicitly.

[stof]

Closing this as sass-embedded is now supported by webpack-encore as one of the sass implementations and so does not trigger a warning anymore (meaning you can uninstall sass if you want)

[Kocal]

now*