Skip to content
New issue

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

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

Already on GitHub? Sign in 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?

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

No branches or pull requests

3 participants