Let developers explicitly specify Dart Sass implementation through USE_DART_SASS environment variable

[christopher-francisco]

Is your proposal related to a problem?

Currently react-scripts uses [email protected] which, according to the README will:

• use Dart Sass if sass is installed
• use Node Sass if node-sass is installed
• will prefer node-sass if both are installed

We have our projects on a monorepo setup, and we have both dependencies through projects. We use pnpm to manage dependencies, and the end result is that since sass-loader finds node-sass, it uses it. There's no way to force Dart Sass

Describe the solution you'd like

Have an environment variable USE_DART_SASS=true to let consumers specify the want to use Dart Sass

// webpack.config.js

const implementationOptions = process.env.USE_DART_SASS === 'true'
  ? { implementation: require.resolve('sass') }
  : {}

// ...

{
  loader: require.resolve(preProcessor),
  options: {
    sourceMap: true,
    ...implementationOptions,
  },
}

Describe alternatives you've considered

I've considered remove node-sass from all of the projects, but that's not only too much work, but it also makes my project health dependent on making sure nobody in the future ever adds a node-sass installation, or my app will break.

I've also considered forking and using custom react-scripts, however keeping it in sync with the public one and such seems like a lot of work for this one single option.

I've pushed #9629 to show you how it'd look like.

[BenJenkinson]

As of sass-loader version 9.0.0, sass is preferred over node-sass.

(This is one of many packages making changes now that node-sass is being deprecated.)

Could this issue be resolved by upgrading react-script's version of sass-loader to ^9.0.3 instead?

[christopher-francisco]

@BenJenkinson yes that's also a solution. I had just assumed CRA may not upgrade sass-loader for a while for reasons similars to "many apps will break", so I went ahead for an alternate solution, but you're correct.

[thebrucecgit]

Is it possible to update the documentation to reflect the usage of Dart Sass now that node-sass is deprecated?

[BenJenkinson]

The documentation has been updated in PR #10779, but it doesn't look like those changes have been published to the website yet.

[BenJenkinson]

@christopher-francisco Now that react-scripts has replaced node-sass with sass in #9988 & #10045, can this issue (and the PR #9629) be closed?