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

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] 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: https://github.com/webpack-contrib/sass-loader/pull/1012#issuecomment-1025156034

[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: https://github.com/sass/sass/issues/3296, https://github.com/sass/embedded-host-node/issues/140#issuecomment-1124196534.

[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.