Merge pull request #4343 from tomepejo/master

[improvement] Add support for sass type files

app/angular/src/server/angular-cli_config.js

@@ -2,7 +2,12 @@ import path from 'path';
 import fs from 'fs';
 import { logger } from '@storybook/node-logger';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
-import { isBuildAngularInstalled, normalizeAssetPatterns } from './angular-cli_utils';
+import {
+  isBuildAngularInstalled,
+  normalizeAssetPatterns,
+  filterOutStylingRules,
+  getAngularCliParts,
+} from './angular-cli_utils';
 
 function getTsConfigOptions(tsConfigPath) {
   const basicOptions = {
@@ -27,20 +32,6 @@ function getTsConfigOptions(tsConfigPath) {
   return basicOptions;
 }
 
-function getAngularCliParts(cliWebpackConfigOptions) {
-  // eslint-disable-next-line global-require, import/no-extraneous-dependencies
-  const ngCliConfigFactory = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs');
-
-  try {
-    return {
-      cliCommonConfig: ngCliConfigFactory.getCommonConfig(cliWebpackConfigOptions),
-      cliStyleConfig: ngCliConfigFactory.getStylesConfig(cliWebpackConfigOptions),
-    };
-  } catch (e) {
-    return null;
-  }
-}
-
 export function getAngularCliWebpackConfigOptions(dirToSearch) {
   const fname = path.join(dirToSearch, 'angular.json');
 
@@ -107,12 +98,9 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions
 
   const { cliCommonConfig, cliStyleConfig } = cliParts;
 
-  // Don't use storybooks .css/.scss rules because we have to use rules created by @angular-devkit/build-angular
+  // Don't use storybooks styling rules because we have to use rules created by @angular-devkit/build-angular
   // because @angular-devkit/build-angular created rules have include/exclude for global style files.
-  const rulesExcludingStyles = baseConfig.module.rules.filter(
+  const rulesExcludingStyles = filterOutStylingRules(baseConfig);
-    rule =>
-      !rule.test || (rule.test.toString() !== '/\\.css$/' && rule.test.toString() !== '/\\.scss$/')
-  );
 
   // cliStyleConfig.entry adds global style files to the webpack context
   const entry = {

app/angular/src/server/angular-cli_utils.js

@@ -23,6 +23,24 @@ function getAssetsParts(resolvedAssetPath, assetPath) {
   };
 }
 
+function isStylingRule(rule) {
+  const { test } = rule;
+
+  if (!test) {
+    return false;
+  }
+
+  if (!(test instanceof RegExp)) {
+    return false;
+  }
+
+  return test.test('.css') || test.test('.scss') || test.test('.sass');
+}
+
+export function filterOutStylingRules(config) {
+  return config.module.rules.filter(rule => !isStylingRule(rule));
+}
+
 export function isBuildAngularInstalled() {
   try {
     require.resolve('@angular-devkit/build-angular');
@@ -32,6 +50,20 @@ export function isBuildAngularInstalled() {
   }
 }
 
+export function getAngularCliParts(cliWebpackConfigOptions) {
+  // eslint-disable-next-line global-require, import/no-extraneous-dependencies
+  const ngCliConfigFactory = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs');
+
+  try {
+    return {
+      cliCommonConfig: ngCliConfigFactory.getCommonConfig(cliWebpackConfigOptions),
+      cliStyleConfig: ngCliConfigFactory.getStylesConfig(cliWebpackConfigOptions),
+    };
+  } catch (e) {
+    return null;
+  }
+}
+
 export function normalizeAssetPatterns(assetPatterns, dirToSearch, sourceRoot) {
   if (!assetPatterns || !assetPatterns.length) {
     return [];

app/angular/src/server/framework-preset-angular.js

@@ -31,7 +31,7 @@ export function webpack(config, { configDir }) {
           exclude: /\.async\.html$/,
         },
         {
-          test: /\.scss$/,
+          test: /\.s(c|a)ss$/,
           use: [require.resolve('raw-loader'), require.resolve('sass-loader')],
         },
       ],