Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Let developers explicitly specify Dart Sass implementation through USE_DART_SASS environment variable

See original GitHub issue

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.