title: Theme/style Angular 2 reusable component libraries
body: <p><strong>General problem</strong></p>
  
  <p>I want to style reusable Angular components to match the style of the specific client project.</p>
  
  <p>I maintain the reusable components in a separate project and generate an npm package out of it. That package is published to a private NPM repository (Sinopia) and then installed into multiple client projects.</p>
  
  <p>The general styling is - of course - specific to the component, but color and font - for example - should match the client project.</p>
  
  <p>How can I best apply styles such as color and font, defined in the client project, to the reusable components?</p>
  
  <p><strong>Current implementation</strong></p>
  
  <p>At the moment I am using <a href="https://github.com/jvandemo/generator-angular2-library" rel="nofollow noreferrer">https://github.com/jvandemo/generator-angular2-library</a> to scaffold the reusable component library.
  It generates some Gulp tasks which let me build a dist version.
  Publishing that dist and using the published package works just fine but the built code makes it hard for me to figure out a working theming strategy.</p>
  
  <p>The Gulp build task will inline both the HTML and CSS resources in the final code.</p>
  
  <p>A sample Component</p>
  
  <pre><code>@Component({
      selector: 'app-messages',
      templateUrl: './messages.component.html',
      styleUrls: ['./messages.component.scss'],
  })
  export class MessagesComponent {
  
      constructor(private messagesService: MessagesService) {
  
      }
  
  }
  </code></pre>
  
  <p>Gets 'flattened' during build to </p>
  
  <pre><code>var MessagesComponent = (function () {
      /**
       * @param {?} messagesService
       */
      function MessagesComponent(messagesService) {
          this.messagesService = messagesService;
      }
      ...
      return MessagesComponent;
  }());
  
  MessagesComponent.decorators = [
      { type: Component, args: [{
                  selector: 'app-messages',
                  template: "&lt;div *ngFor=\"let message of messages\"&gt; &lt;div class=\"message {{message.type}}-message\"&gt; {{message.message}} &lt;i class=\"fa fa-remove\" (click)=\"removeMessage(message)\"&gt;x&lt;/i&gt; &lt;/div&gt; &lt;/div&gt;",
                  styles: [".message { line-height: 36px; padding: 4px 20px; margin: 2px; position: relative; } .message .fa-remove { position: absolute; right: 20px; cursor: pointer; } .info-message { background-color: #005CAB; color: white; } .error-message { background-color: red; color: white; } "],
              },] },
  ];
  </code></pre>
  
  <p>The <code>MessagesComponent.decorators</code> now contains the styling in-line.</p>
  
  <p><strong>Concrete questions</strong></p>
  
  <ol>
  <li><p>Is using the <a href="https://github.com/jvandemo/generator-angular2-library" rel="nofollow noreferrer">https://github.com/jvandemo/generator-angular2-library</a> generator a good choice for creating component libraries? Or are there better ways?</p></li>
  <li><p>How do I have to 'override' the color and font styling of my
  reusable components?</p></li>
  </ol>
  
  <p>I had hoped to be able to use scss variables in the component library which could be (re-)defined in the client project. Something like</p>
  
  <p>Reusable component <code>messages.component.scss</code>:</p>
  
  <pre><code>.info-message {
     background-color: $primary-color;
     color: white;
   }
  </code></pre>
  
  <p>Client project <code>/style/_style-vars.scss</code>:</p>
  
  <pre><code>$primary-color: #005CAB;
  </code></pre>
  
  <p>Any ideas on how to tackle this?</p>
  
  <p><strong>FOLLOW UP</strong></p>
  
  <p>I got one step further:</p>
  
  <p>I now use CSS3 variables and that gets me almost there:</p>
  
  <p>In the reusable component, I define my SCSS variables as follows:</p>
  
  <pre><code>$primary-color: var(--ang-ux-primary-color, #5FB0FD);
  
  .ang-ux-primary {
    background-color: $primary-color;
  }
  </code></pre>
  
  <p>and in my client project I define the styles like this (style.scss):</p>
  
  <pre><code>// styling reusable components
  :root {
    --ang-ux-primary-color: #666666;
  }
  </code></pre>
  
  <p>This works, but it seems I cannot use SCSS variables in the definition of my CSS variable:</p>
  
  <pre><code>$primary-color: #666666;
  
  // styling reusable components
  :root {
    --ang-ux-primary-color: $primary-color;
  }
  </code></pre>
  
  <p>results in an empty $primary-color in the reusable component.
  I opened a separate thread for this issue: <a href="https://stackoverflow.com/questions/50534058/using-scss-variable-inside-css3-variable-definition-not-working">Using SCSS variable inside CSS3 variable definition not working?</a></p>