title: Lazy load application theme styles with Angular CLI
body: <p>I am trying to switch the <code>href</code> of a <code>&lt;link /&gt;</code> for theming purposes and the SCSS themes live in a packages folder of my monorepo that are symlinked in <code>node_modules</code>. I need to be able to compile and reference these.</p>
  
  <p>I came across the following fixed issue: <a href="https://github.com/angular/angular-cli/issues/3401" rel="noreferrer">angular/angular-cli#3401</a> and have been trying to implement something similar:</p>
  
  <pre><code>"styles": [
      "styles.scss",
      {
          "input": "../node_modules/@org/themes/dark.scss",
          "output": "dark",
          "lazy": true
      }
  ],
  </code></pre>
  
  <p>My understanding (perhaps incorrect) was that this would compile the <code>dark.scss</code> file into <code>dist/dark.bundle.css</code> and that I would be able to load it via <a href="http://localhost:4200/dist/dark.bundle.css" rel="noreferrer">http://localhost:4200/dist/dark.bundle.css</a> but it is not working as expected. Am I misunderstanding something or doing this completely wrong? </p>
  
  <p>How do I compile an SCSS file from <code>node_modules</code> that I can then lazy load in the app? Is there another/better approach I could try instead?</p>
  
  <p><strong>Additional notes:</strong></p>
  
  <ul>
  <li>Using Angular version <code>4.2.4</code></li>
  <li>Using Angular CLI version <code>1.3.0</code></li>
  <li>The <a href="https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/global-styles.md" rel="noreferrer">documentation for this approach</a>  </li>
  <li>I am working in a monorepo so <code>node_modules/@org/themes</code> is a symlink </li>
  <li>I have tried using <code>ng serve --preserve-symlinks</code> option in case the above was the issue. It made no difference</li>
  </ul>
  
  <p>I have looked into the way that the <a href="https://github.com/angular/material.angular.io/blob/master/package.json#L13" rel="noreferrer">Angular Material docs website approaches this problem</a> and it seems they have a custom build script that compiles the SCSS files to CSS files in the <code>assets</code> directory before serving the application. I thought the fixed issue above removed the need for this step but perhaps not. Is this the only way it can be done?</p>
  
  <h1>SOLVED</h1>
  
  <p>Thanks to @Kuncevic. I was missing the <code>--extract-css</code> flag. </p>
  
  <p>Working config:</p>
  
  <pre><code>"styles": [
      "styles.scss",
      {
          "input": "../node_modules/@org/themes/src/dark.scss",
          "output": "themes/dark",
          "lazy": true
      }
  ],
  </code></pre>
  
  <p>And with the following serve script, I can access it via <a href="http://localhost:4200/themes/dark.bundle.css" rel="noreferrer">http://localhost:4200/themes/dark.bundle.css</a>:</p>
  
  <p><code>ng serve --extract-css --preserve-symlinks</code></p>