Support absolute imports for SASS

Author: Valentin Hervieu

packages/react-scripts/config/custom-react-scripts/customizers/webpack-loaders.js

@@ -9,7 +9,13 @@ module.exports = {
     get: styleLoader(undefined, /\.css$/, /\.module\.css$/),
   },
   SASS: {
-    get: styleLoader(sassLoader, /\.s[ac]ss$/, /\.module\.s[ac]ss$/),
+    get: styleLoader(
+      sassLoader, 
+      /\.s[ac]ss$/,
+      /\.module\.s[ac]ss$/, 
+      false, 
+      { includePaths: ['./node_modules', './src'] }
+    ),
   },
   LESS: {
     get: styleLoader(lessLoader, /\.less$/, /\.module\.less$/),
@@ -24,7 +30,12 @@ module.exports = {
     get: styleLoader(lessLoader, /\.module\.less$/, undefined, true),
   },
   SASS_MODULES: {
-    get: styleLoader(sassLoader, /\.module\.s[ac]ss$/, undefined, true),
+    get: styleLoader(
+      sassLoader,
+      /\.module\.s[ac]ss$/,
+      undefined,
+      true,
+      { includePaths: ['./node_modules', './src'], }),
   },
   CSS_MODULES: {
     get: styleLoader(undefined, /\.module\.css$/, undefined, true),

packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js

@@ -6,7 +6,7 @@ const localIdentName =
   process.env.REACT_APP_CSS_MODULE_CLASSNAME_TEMPLATE ||
   '[sha512:hash:base32]-[name]-[local]';
 
-module.exports = (loader, test, exclude, modules) => isDev => {
+module.exports = (loader, test, exclude, modules, options) => isDev => {
   let loaders = isDev
     ? [
         {
@@ -42,9 +42,11 @@ module.exports = (loader, test, exclude, modules) => isDev => {
   if (loader) {
     loaders.push({
       loader,
-      options: {
-        sourceMap: shouldUseSourceMap,
-      },
+      options: Object.assign(
+        {},
+        { sourceMap: shouldUseSourceMap },
+        options
+      ),
     });
   }