Codesandbox not recognizing sass modules with @use when using dart-sass

[jjloneman]

Problem

Sass released a module system where @use can replace @import amongst other features.

Unfortunately, node-sass does not support the new module system, only dart-sass.

The sass npm module is the implementation of dart-sass, which is supported by create-react-app.

Code Sandbox Example

• codesandbox reproduction

Using the react template in codesandbox and adding the bootstrap and sass packages, adding styles.scss with the @import rule works:

@import "~bootstrap/scss/bootstrap";

but using the @use rule does not work:

@use "~bootstrap/scss/bootstrap";

.App {
  @include bootstrap.float-right();
}

and displays the following error:

Local Example

Exporting the sandbox to a zip through File > Export to Zip and running npm install and npm start works (the text is supposed to float right):

[SaraVieira]

Hey!

We currently do not support dart-sass as we run all the sass compilations through node and web workers

As soon as this is supported in node-sass it will be added, I subscribed to the issue mentioned so we can upgrade as soon as it's added

Sorry for the issue

[Donov4n]

Sadly, node-sass is deprecated and the module support will probably never be implemented.

Is a migration to dart-sass being considered?

[wesgro]

Could this be re-opened?

node-sass is dead and not being able to use sass modules in a codesandbox gives me bad feels.

[jjloneman]

Regarding @Donov4n's and @wesgro's comments, node-sass is indeed deprecated. As per their GitHub:

Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

@SaraVieira, you mentioned:

We currently do not support dart-sass as we run all the sass compilations through node and web workers

but is there a specific reason that sass compilations through node can't use dart-sass? According to their readme, their JavaScript api is fully compatible with Node Sass:

When installed via npm, Dart Sass supports a JavaScript API that's fully
compatible with Node Sass (with a few exceptions listed below), with support
for both the render() and renderSync() functions. See the Sass
website for full API documentation!

Note however that by default, renderSync() is more than twice as fast as
render() due to the overhead of asynchronous callbacks. To avoid this
performance hit, render() can use the fibers package to call
asynchronous importers from the synchronous code path. To enable this, pass the
Fiber class to the fiber option:

var sass = require("sass");
var Fiber = require("fibers");

sass.render({
  file: "input.scss",
  importer: function(url, prev, done) {
    // ...
  },
  fiber: Fiber
}, function(err, result) {
  // ...
});

They also have a standalone executable to compile sass files:

Dart Sass's stand-alone command-line executable uses the blazing-fast Dart VM to compile your stylesheets. To install Dart Sass on the command line, check out the installation instructions. Once you've got it running, you can use it compile files:

sass source/index.scss css/index.css

[Aleksandyr]

@SaraVieira Why don't you reopen this issue as more and more people rely on the new dart-sass compiler?

[SaraVieira]

@CompuIves @christianalfoni Should this be reopened? Is there a way to get dart sass in CodeSandbox?

[CompuIves]

Yes that'd be good! Jasper is looking into this. So far we haven't found a reliable way to get dart-sass to run in the browser.

…

On Wed, Jul 21 2021 at 12:49 PM, Sara Vieira ***@***.***> wrote: @CompuIves <https://github.com/CompuIves> @christianalfoni <https://github.com/christianalfoni> Should this be reopened? Is there a way to get dart sass in CodeSandbox? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4742 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEPKCCMHAQBWOJV3XTV5ZDTY2Q4PANCNFSM4QFHE4OQ> .

[Aleksandyr]

@CompuIves @SaraVieira at least we can reopen the issues so that the users know you are working on it.

[SaraVieira]

If there is a way then sure! It's reopened!

[CompuIves]

Thanks a lot @SaraVieira ❤️ . This is a good place to track @DeMoorJasper 😄