Allow custom includePaths for sass

Author: lixiaoyan

packages/react-scripts/config/env.js

@@ -48,6 +48,8 @@ dotenvFiles.forEach(dotenvFile => {
   }
 });
 
+const appDirectory = fs.realpathSync(process.cwd());
+
 // We support resolving modules according to `NODE_PATH`.
 // This lets you use absolute paths in imports inside large monorepos:
 // https://github.com/facebook/create-react-app/issues/253.
@@ -57,13 +59,18 @@ dotenvFiles.forEach(dotenvFile => {
 // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
 // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
 // We also resolve them to make sure all tools using them work consistently.
-const appDirectory = fs.realpathSync(process.cwd());
 process.env.NODE_PATH = (process.env.NODE_PATH || '')
   .split(path.delimiter)
   .filter(folder => folder && !path.isAbsolute(folder))
   .map(folder => path.resolve(appDirectory, folder))
   .join(path.delimiter);
 
+process.env.SASS_INCLUDEPATHS = (process.env.SASS_INCLUDEPATHS || '')
+  .split(path.delimiter)
+  .filter(folder => folder)
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 // injected into the application via DefinePlugin in Webpack configuration.
 const REACT_APP = /^REACT_APP_/i;

packages/react-scripts/config/webpack.config.dev.js

@@ -78,7 +78,7 @@ const getStyleLoaders = (cssOptions, preProcessor) => {
     },
   ];
   if (preProcessor) {
-    loaders.push(require.resolve(preProcessor));
+    loaders.push(preProcessor);
   }
   return loaders;
 };
@@ -315,9 +315,7 @@ module.exports = {
           {
             test: cssRegex,
             exclude: cssModuleRegex,
-            use: getStyleLoaders({
-              importLoaders: 1,
-            }),
+            use: getStyleLoaders({ importLoaders: 1 }),
           },
           // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
           // using the extension .module.css
@@ -337,7 +335,17 @@ module.exports = {
           {
             test: sassRegex,
             exclude: sassModuleRegex,
-            use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
+            use: getStyleLoaders(
+              { importLoaders: 2 },
+              {
+                loader: require.resolve('sass-loader'),
+                options: {
+                  includePaths: process.env.SASS_INCLUDEPATHS.split(
+                    path.delimiter
+                  ).filter(Boolean),
+                },
+              }
+            ),
           },
           // Adds support for CSS Modules, but using SASS
           // using the extension .module.scss or .module.sass
@@ -349,7 +357,14 @@ module.exports = {
                 modules: true,
                 getLocalIdent: getCSSModuleLocalIdent,
               },
-              'sass-loader'
+              {
+                loader: require.resolve('sass-loader'),
+                options: {
+                  includePaths: process.env.SASS_INCLUDEPATHS.split(
+                    path.delimiter
+                  ).filter(Boolean),
+                },
+              }
             ),
           },
           // "file" loader makes sure those assets get served by WebpackDevServer.

packages/react-scripts/config/webpack.config.prod.js

@@ -103,12 +103,7 @@ const getStyleLoaders = (cssOptions, preProcessor) => {
     },
   ];
   if (preProcessor) {
-    loaders.push({
-      loader: require.resolve(preProcessor),
-      options: {
-        sourceMap: shouldUseSourceMap,
-      },
-    });
+    loaders.push(preProcessor);
   }
   return loaders;
 };
@@ -422,7 +417,15 @@ module.exports = {
                 importLoaders: 2,
                 sourceMap: shouldUseSourceMap,
               },
-              'sass-loader'
+              {
+                loader: require.resolve('sass-loader'),
+                options: {
+                  sourceMap: shouldUseSourceMap,
+                  includePaths: process.env.SASS_INCLUDEPATHS.split(
+                    path.delimiter
+                  ).filter(Boolean),
+                },
+              }
             ),
             // Don't consider CSS imports dead code even if the
             // containing package claims to have no side effects.
@@ -441,7 +444,15 @@ module.exports = {
                 modules: true,
                 getLocalIdent: getCSSModuleLocalIdent,
               },
-              'sass-loader'
+              {
+                loader: require.resolve('sass-loader'),
+                options: {
+                  sourceMap: shouldUseSourceMap,
+                  includePaths: process.env.SASS_INCLUDEPATHS.split(
+                    path.delimiter
+                  ).filter(Boolean),
+                },
+              }
             ),
           },
           // "file" loader makes sure assets end up in the `build` folder.