Add Sass loader (#4195)

* Installs and adds sass loader task in webpack for dev environment.

* Uses Timer's branch of sass-loader without node-sass dependency.

* Adds method for handling SASS modules.

* Fixes extension of excluded files when looking for scss modules.

* Adds support for both .scss and .sass extensions.

* Uses ExtractTextPlugin with sass-loader to bundle styles for the production build.

* Bundles SASS modules for the production build.

* Uses the latest version of sass-loader.

* Adds function to create different rules for style loaders in dev environment.

* Abstracts style loaders to a common function to avoid repetition.

* Simplifies the common function that creates style loaders.

* Creates assets for testing SASS/SCSS support.

* Creates mock components and unit tests for SASS and SCSS with and without modules.

* Creates integration tests for SASS/SCSS support.

* Adds node-sass as a template dependency so sass-loader can be tested.

* Includes sass tests when test component is mounted.

* Fixes asserted module name for sass and scss modules tests.

* Removes tests against css imports in SCSS and SASS files.

* Updates sass-loader to v7.

* Uses getCSSModuleLocalIdent from react-dev-utils.

* Fixes tests to match the use of getCSSModuleLocalIdent.

* Improves readability of getStyleLoader function.

* Uses postcss after sass.

* Refactors dev config to simplify common function for style loaders.

* Refactors prod config to simplify common function for style loaders.

* Use importLoaders config according to css-loader docs.

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

@@ -46,6 +46,31 @@ const postCSSLoaderOptions = {
   ],
 };
 
+// style files regexes
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+// common function to get style loaders
+const getStyleLoaders = (cssOptions, preProcessor) => {
+  const loaders = [
+    require.resolve('style-loader'),
+    {
+      loader: require.resolve('css-loader'),
+      options: cssOptions,
+    },
+    {
+      loader: require.resolve('postcss-loader'),
+      options: postCSSLoaderOptions,
+    },
+  ];
+  if (preProcessor) {
+    loaders.push(require.resolve(preProcessor));
+  }
+  return loaders;
+};
+
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.
 // The production configuration is different and lives in a separate file.
@@ -243,41 +268,44 @@ module.exports = {
           // in development "style" loader enables hot editing of CSS.
           // By default we support CSS Modules with the extension .module.css
           {
-            test: /\.css$/,
-            exclude: /\.module\.css$/,
-            use: [
-              require.resolve('style-loader'),
-              {
-                loader: require.resolve('css-loader'),
-                options: {
-                  importLoaders: 1,
-                },
-              },
-              {
-                loader: require.resolve('postcss-loader'),
-                options: postCSSLoaderOptions,
-              },
-            ],
+            test: cssRegex,
+            exclude: cssModuleRegex,
+            use: getStyleLoaders({
+              importLoaders: 1,
+            }),
           },
           // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
           // using the extension .module.css
           {
-            test: /\.module\.css$/,
-            use: [
-              require.resolve('style-loader'),
+            test: cssModuleRegex,
+            use: getStyleLoaders({
+              importLoaders: 1,
+              modules: true,
+              getLocalIdent: getCSSModuleLocalIdent,
+            }),
+          },
+          // Opt-in support for SASS (using .scss or .sass extensions).
+          // Chains the sass-loader with the css-loader and the style-loader
+          // to immediately apply all styles to the DOM.
+          // By default we support SASS Modules with the
+          // extensions .module.scss or .module.sass
+          {
+            test: sassRegex,
+            exclude: sassModuleRegex,
+            use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
+          },
+          // Adds support for CSS Modules, but using SASS
+          // using the extension .module.scss or .module.sass
+          {
+            test: sassModuleRegex,
+            use: getStyleLoaders(
               {
-                loader: require.resolve('css-loader'),
-                options: {
-                  importLoaders: 1,
-                  modules: true,
-                  getLocalIdent: getCSSModuleLocalIdent,
-                },
+                importLoaders: 2,
+                modules: true,
+                getLocalIdent: getCSSModuleLocalIdent,
               },
-              {
-                loader: require.resolve('postcss-loader'),
-                options: postCSSLoaderOptions,
-              },
-            ],
+              'sass-loader'
+            ),
           },
           // The GraphQL loader preprocesses GraphQL queries in .graphql files.
           {