feat(react): add support for css modules for SASS/SCSS files (nrwl#2719)

Closes nrwl#2406

e2e/utils.ts

@@ -298,7 +298,6 @@ export function copyMissingPackages(): void {
     'semver',
 
     'css-loader',
-    'css-modules-typescript-loader',
     'mime',
     'less',
     'send',

package.json

@@ -127,7 +127,6 @@
     "core-js": "^2.6.9",
     "cosmiconfig": "^4.0.0",
     "css-loader": "3.4.2",
-    "css-modules-typescript-loader": "4.0.0",
     "cypress": "^4.1.0",
     "cz-conventional-changelog": "^3.0.2",
     "cz-customizable": "^6.2.0",

packages/web/package.json

@@ -62,7 +62,6 @@
     "copy-webpack-plugin": "5.1.1",
     "core-js": "^3.2.1",
     "css-loader": "3.4.2",
-    "css-modules-typescript-loader": "4.0.0",
     "file-loader": "4.2.0",
     "find-cache-dir": "3.0.0",
     "fork-ts-checker-webpack-plugin": "^3.1.1",

packages/web/src/builders/build/build.impl.ts

@@ -28,6 +28,8 @@ export interface WebBuildBuilderOptions extends BuildBuilderOptions {
   baseHref: string;
   deployUrl: string;
 
+  extractCss?: boolean;
+
   polyfills?: string;
   es2015Polyfills?: string;
 

packages/web/src/utils/web.config.ts

@@ -14,6 +14,8 @@ import { IndexHtmlWebpackPlugin } from './third-party/cli-files/plugins/index-ht
 import { generateEntryPoints } from './third-party/cli-files/utilities/package-chunk-sort';
 import { ScriptTarget } from 'typescript';
 
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
 export function getWebConfig(
   root,
   sourceRoot,
@@ -44,7 +46,7 @@ export function getWebConfig(
   return mergeWebpack([
     _getBaseWebpackPartial(options, esm, isScriptOptimizeOn),
     getPolyfillsPartial(options, esm, isScriptOptimizeOn),
-    getStylesPartial(wco),
+    getStylesPartial(wco, options),
     getCommonPartial(wco),
     getBrowserPartial(wco, options, isScriptOptimizeOn)
   ]);
@@ -104,7 +106,10 @@ function getCommonPartial(wco: any): Configuration {
   return commonConfig;
 }
 
-function getStylesPartial(wco: any): Configuration {
+function getStylesPartial(
+  wco: any,
+  options: WebBuildBuilderOptions
+): Configuration {
   const partial = getStylesConfig(wco);
   const rules = partial.module.rules.map(rule => {
     if (!Array.isArray(rule.use)) {
@@ -130,8 +135,28 @@ function getStylesPartial(wco: any): Configuration {
         {
           test: /\.module\.css$/,
           use: [
-            { loader: 'style-loader' },
-            { loader: 'css-modules-typescript-loader' },
+            {
+              loader: options.extractCss
+                ? MiniCssExtractPlugin.loader
+                : 'style-loader'
+            },
+            {
+              loader: 'css-loader',
+              options: {
+                modules: true,
+                importLoaders: 1
+              }
+            }
+          ]
+        },
+        {
+          test: /\.module\.(scss|sass)$/,
+          use: [
+            {
+              loader: options.extractCss
+                ? MiniCssExtractPlugin.loader
+                : 'style-loader'
+            },
             {
               loader: 'css-loader',
               options: {