Let developers explicitly specify Dart Sass implementation through USE_DART_SASS environment variable

Created by: christopher-francisco

Is your proposal related to a problem?

Currently react-scripts uses sass-loader@8.0.2 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.