Allow usage of sass-embedded instead of sass package

[TomTomB]

Clear and concise description of the problem

Now that sass-embedded hit stable it would be nice to have it as an option for compiling sass/scss since it's a lot faster. Currently if you try to use it as a replacement for the sass package, you'll get the following error:

[vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it?

Suggested solution

Add support for the sass-embedded package to be used instead of sass.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[pbowyer]

I tried aliasing the package:

npm i -D sass@npm:sass-embedded@latest

which resulted in errors:

vite v2.7.13 building for production...
✓ 36 modules transformed.
[vite:css] TypeError: Cannot read property 'url' of undefined
   ╷
14 │ @import '~material-design-icons-iconfont/src/material-design-icons';
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  assets\css\admin.scss 14:9  root stylesheet
file: D:/projects/example/assets/css/admin.scss
Error: TypeError: Cannot read property 'url' of undefined
   ╷
14 │ @import '~material-design-icons-iconfont/src/material-design-icons';
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  assets\css\admin.scss 14:9  root stylesheet
error during build:
Error: Error: TypeError: Cannot read property 'url' of undefined
   ╷
14 │ @import '~material-design-icons-iconfont/src/material-design-icons';
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  assets\css\admin.scss 14:9  root stylesheet
    at handleCompileResponse (D:\projects\example\node_modules\sass\dist\lib\src\compile.js:213:15)
    at compileRequestAsync (D:\projects\example\node_modules\sass\dist\lib\src\compile.js:101:16)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

[danieka]

@pbowyer @nex3 Webpack sass-loader seems to encounter the exact same error here: webpack-contrib/sass-loader#1012 (comment)

[ygj6]

FYI, I made a simple attempt to support SASS modern API #7170

[Lucide]

I'm having severe performance issues with sass (js) and carbon-components.
Being able to choose the compiler implementation, like with common Svelte, Rollup pre-processing plugins would help a lot.

[cawa-93]

npm i -D sass@npm:sass-embedded@latest

Actually works for me. One you may need configure paths

- @import "node_modules/bootstrap/scss/variables";
+ @import "../../node_modules/bootstrap/scss/variables";

[sapphi-red]

FYI there is a case when sass-embedded is slower than sass.
These are the reasons: sass/sass#3296, sass/embedded-host-node#140 (comment).

[bluwy]

We've discussed this in the last meeting, where the slower speed of sass-embedded in some cases makes it tricky for us to have builtin support for now. Until that's fix, we could probably revisit this again.

For now, you can use npm i -D sass@npm:sass-embedded@latest as recommended above to try it.

[segevfiner]

Maybe with this it will actually be faster instead: https://github.com/sass/dart-sass/blob/main/CHANGELOG.md#1700

[nex3]

With the new compiler classes, Embedded Sass should be pretty much universally faster than the sass package if you're using it right.

[Mister-Hope]

FYI there is a case when sass-embedded is slower than sass. These are the reasons: sass/sass#3296, sass/embedded-host-node#140 (comment).

This isn't the case now

With the new compiler classes, Embedded Sass should be pretty much universally faster than the sass package if you're using it right.

The above comment is from sass team, so maybe it's a good time to review it again with #7116

My debug shows that Vite is really slow here with sass when there are a lot of Vue SFC which use <style lang="scss">.

This could be a noticeable performance improvement for sass and vue sfc users. @sapphi-red