title: Angular2: Custom material theme in each lazy loaded submodule
body: <h1><strong>Problem with loading custom Angular Material 2 themes in separate submodules of Angular 7 app</strong></h1>
  
  <p>I have angular wrapper module (app module) and many independent lazy-loaded sub-modules. Each sub-module behaves like a totaly separate app and needs its own angular material theme.</p>
  
  <p>I've created custom theme for each sub-module and tried to reference the custom theme in each of components' <em>.scss</em> file with relative path.</p>
  
  <p>Some of the Material components apply the custom theme (button) and some (mat-form-field) just take the theme specified in styles.scss.</p>
  
  <p>One way I can avoid this is including each custom theme in 'styles' array of angular.json, but I'm afraid that, by doing this, each independent sub-module (app) will have to load every themes' compiled .css and it'll be overhead.</p>
  
  <p>Is there any known issue with this or any better solution?</p>
  
  <p><em>home-app.component.scss</em>:</p>
  
  <pre><code>@import './theme.scss';
  
  </code></pre>
  
  <p>VS.</p>
  
  <p><em>angular.json</em></p>
  
  <pre><code>...
  "styles": [
      "src/styles.scss",
      "src/app/orgs/home/theme.scss" // &lt;-- FIXED BY ADDING THIS
  ],
  ...
  
  </code></pre>
  
  <p><strong>Expected:</strong>
  Theme declared in the <em>home-app.component.scss</em> will be loaded and applied to every material component used in home-app.component.html</p>
  
  <p><strong>Actual:</strong>
  If I don't add <em>"src/app/orgs/home/theme.scss"</em> to <em>angular.json</em>, the custom theme declared in <em>styles.scss</em> will be applied to some material components used in <em>home-app.component.html</em>, and some material components will use the imported theme specified in <em>home-app.component.scss</em></p>