diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.js index ed51830b6fe..80dc99d35a1 100644 --- a/app/angular/src/server/angular-cli_config.js +++ b/app/angular/src/server/angular-cli_config.js @@ -41,6 +41,26 @@ function getAngularCliParts(cliWebpackConfigOptions) { } } +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'); +} + +function filterOutStylingRules(config) { + // Don't use storybooks .css/.sass/.scss 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. + return config.module.rules.filter(rule => !isStylingRule(rule)); +} + export function getAngularCliWebpackConfigOptions(dirToSearch) { const fname = path.join(dirToSearch, 'angular.json'); @@ -107,15 +127,7 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions const { cliCommonConfig, cliStyleConfig } = cliParts; - // Don't use storybooks .css/.sass/.scss 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( - rule => - !rule.test || - (rule.test.toString() !== '/\\.css$/' && - rule.test.toString() !== '/\\.sass$/' && - rule.test.toString() !== '/\\.scss$/') - ); + const rulesExcludingStyles = filterOutStylingRules(baseConfig); // cliStyleConfig.entry adds global style files to the webpack context const entry = { diff --git a/app/angular/src/server/framework-preset-angular.js b/app/angular/src/server/framework-preset-angular.js index 029ee7445e6..882e212caec 100644 --- a/app/angular/src/server/framework-preset-angular.js +++ b/app/angular/src/server/framework-preset-angular.js @@ -31,7 +31,7 @@ export function webpack(config, { configDir }) { exclude: /\.async\.html$/, }, { - test: /\.(scss|sass)$/, + test: /\.s(c|a)ss$/, use: [require.resolve('raw-loader'), require.resolve('sass-loader')], }, ],