Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Let developers explicitly specify Dart Sass implementation through USE_DART_SASS environment variable #9628

Open
christopher-francisco opened this issue Sep 11, 2020 · 5 comments

Comments

@christopher-francisco
Copy link

christopher-francisco commented Sep 11, 2020

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.

@christopher-francisco christopher-francisco changed the title Use an environment variable to use Dart Sass implementation Let developers explicitly specify Dart Sass implementation through USE_DART_SASS environment variable Sep 11, 2020
@BenJenkinson
Copy link

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
Copy link
Author

@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
Copy link

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

@BenJenkinson
Copy link

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

@BenJenkinson
Copy link

BenJenkinson commented Jun 29, 2021

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

# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
None yet
Development

No branches or pull requests

3 participants