diff --git a/packages/compiler-cli/src/ngtsc/resource_loader.ts b/packages/compiler-cli/src/ngtsc/resource_loader.ts
index f728565ff80..e676a1683d1 100644
--- a/packages/compiler-cli/src/ngtsc/resource_loader.ts
+++ b/packages/compiler-cli/src/ngtsc/resource_loader.ts
@@ -11,6 +11,8 @@ import * as ts from 'typescript';
 import {CompilerHost} from '../transformers/api';
 import {ResourceLoader} from './annotations/src/api';
 
+const CSS_PREPROCESSOR_EXT = /(\.scss|\.less|\.styl)$/;
+
 /**
  * `ResourceLoader` which delegates to a `CompilerHost` resource loading method.
  */
@@ -123,6 +125,16 @@ export class HostResourceLoader implements ResourceLoader {
     for (const candidate of candidateLocations) {
       if (fs.existsSync(candidate)) {
         return candidate;
+      } else if (CSS_PREPROCESSOR_EXT.test(candidate)) {
+        /**
+         * If the user specified styleUrl points to *.scss, but the Sass compiler was run before
+         * Angular, then the resource may have been generated as *.css. Simply try the resolution
+         * again.
+         */
+        const cssFallbackUrl = candidate.replace(CSS_PREPROCESSOR_EXT, '.css');
+        if (fs.existsSync(cssFallbackUrl)) {
+          return cssFallbackUrl;
+        }
       }
     }
     return null;
diff --git a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
index bc28e284d7d..05d84cae96f 100644
--- a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
+++ b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
@@ -311,6 +311,26 @@ describe('ngtsc behavioral tests', () => {
     expect(jsContents).toContain('background-color: blue');
   });
 
+  it('should compile components with styleUrls with fallback to .css extension', () => {
+    env.tsconfig();
+    env.write('test.ts', `
+        import {Component} from '@angular/core';
+
+        @Component({
+          selector: 'test-cmp',
+          styleUrls: ['./dir/style.scss'],
+          template: '',
+        })
+        export class TestCmp {}
+    `);
+    env.write('dir/style.css', ':host { background-color: blue; }');
+
+    env.driveMain();
+
+    const jsContents = env.getContents('test.js');
+    expect(jsContents).toContain('background-color: blue');
+  });
+
   it('should compile NgModules without errors', () => {
     env.tsconfig();
     env.write('test.ts', `