diff --git a/docusaurus/docs/adding-a-sass-stylesheet.md b/docusaurus/docs/adding-a-sass-stylesheet.md
index 1ba76380e6a..c8e0f071f6e 100644
--- a/docusaurus/docs/adding-a-sass-stylesheet.md
+++ b/docusaurus/docs/adding-a-sass-stylesheet.md
@@ -61,3 +61,11 @@ If you set `SASS_PATH=node_modules:src`, this will allow you to do imports like
 > module.file_ext=.sass
 > module.file_ext=.scss
 > ```
+
+## Using Dart SASS
+
+`sass-loader` has its own heuristics to figure out if it should use Dart Sass or Node Sass depending on which one is installed. In the particular edge case where both are installed, and you cannot uninstall one of them, you can use `USE_DART_SASS=true` environment variable to force Dart Sass use.
+
+```
+USE_DART_SASS=true yarn start
+```
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 5e1935d8a0e..beb1844d2d8 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -53,6 +53,8 @@ const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 
 const isExtendingEslintConfig = process.env.EXTEND_ESLINT === 'true';
 
+const shouldUseDartSass = process.env.USE_DART_SASS === 'true';
+
 const imageInlineSizeLimit = parseInt(
   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
 );
@@ -143,6 +145,7 @@ module.exports = function (webpackEnv) {
           loader: require.resolve(preProcessor),
           options: {
             sourceMap: true,
+            ...(shouldUseDartSass ? { implementation: require('sass') } : {}),
           },
         }
       );