From 4dd370ab7a6a046af0b14842ed4d43cd9f4ca73e Mon Sep 17 00:00:00 2001 From: Christopher Francisco Date: Fri, 11 Sep 2020 11:14:57 -0500 Subject: [PATCH 1/2] Allow specifying Dart Sass implementation For cases where you're not able to completely remove `node-sass`, causing `sass-loader` to pick it up, you can now explicitly specify you want to use Dart Sass through `USE_DART_SASS=true` env variable. --- packages/react-scripts/config/webpack.config.js | 3 +++ 1 file changed, 3 insertions(+) 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') } : {}), }, } ); From 9c26cc580c854fcd9b0551a5769d67806c20ac1e Mon Sep 17 00:00:00 2001 From: Christopher Francisco Date: Fri, 11 Sep 2020 12:13:59 -0500 Subject: [PATCH 2/2] Update docs --- docusaurus/docs/adding-a-sass-stylesheet.md | 8 ++++++++ 1 file changed, 8 insertions(+) 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 +```