fix(@schematics/angular): set cortrect file extention in config when using preprocessors (#13552)

Fixes #13550

Author: alan-agius4

packages/schematics/angular/application/index.ts

@@ -185,6 +185,8 @@ function addAppToWorkspaceFile(options: ApplicationOptions, workspace: Workspace
     });
   }
 
+  const styleExt = styleToFileExtention(options.style);
+
   const project: WorkspaceProject = {
     root: projectRoot,
     sourceRoot: join(normalize(projectRoot), 'src'),
@@ -205,7 +207,7 @@ function addAppToWorkspaceFile(options: ApplicationOptions, workspace: Workspace
             join(normalize(projectRoot), 'src', 'assets'),
           ],
           styles: [
-            `${projectRoot}src/styles.${options.style}`,
+            `${projectRoot}src/styles.${styleExt}`,
           ],
           scripts: [],
           es5BrowserSupport: true,
@@ -258,7 +260,7 @@ function addAppToWorkspaceFile(options: ApplicationOptions, workspace: Workspace
           tsConfig: `${rootFilesRoot}tsconfig.spec.json`,
           karmaConfig: `${rootFilesRoot}karma.conf.js`,
           styles: [
-            `${projectRoot}src/styles.${options.style}`,
+            `${projectRoot}src/styles.${styleExt}`,
           ],
           scripts: [],
           assets: [

packages/schematics/angular/application/index_spec.ts

@@ -10,7 +10,7 @@ import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/te
 import { latestVersions } from '../utility/latest-versions';
 import { getFileContent } from '../utility/test';
 import { Schema as WorkspaceOptions } from '../workspace/schema';
-import { Schema as ApplicationOptions } from './schema';
+import { Schema as ApplicationOptions, Style } from './schema';
 
 // tslint:disable:max-line-length
 describe('Application Schematic', () => {
@@ -275,6 +275,22 @@ describe('Application Schematic', () => {
       ]);
     });
 
+    it('should set values in angular.json correctly when using a style preprocessor', () => {
+      const options = { ...defaultOptions, projectRoot: '', style: Style.Sass };
+      const tree = schematicRunner.runSchematic('application', options, workspaceTree);
+      const config = JSON.parse(tree.readContent('/angular.json'));
+      const prj = config.projects.foo;
+      const buildOpt = prj.architect.build.options;
+      expect(buildOpt.styles).toEqual([
+        'src/styles.scss',
+      ]);
+      const testOpt = prj.architect.test.options;
+      expect(testOpt.styles).toEqual([
+        'src/styles.scss',
+      ]);
+      expect(tree.exists('src/styles.scss')).toBe(true);
+    });
+
     it('should set the relative tsconfig paths', () => {
       const options = { ...defaultOptions, projectRoot: '' };