Angular 6 Library Components and SCSS

Question

I've been building out an Angular 6 library. The new process is quite nice.

I'm taking some modules and their components that were written in a previous version and converting them over. These components have been decorated so that their view and styles are external files, html and scss respectively.

The library I'm working on also contains global styles that are output to the library folder using scss-bundler during the build process. These styles do not include any of the component styles.

I've used the "base" Angular application as a demo site for the components. Again, very nice that I can use one repo to build my library and deploy a demo of it.

Within the application I'm importing my global styles from the library's dist directory:

/* VARIABLES */
@import "../dist/vdl-lib/variables";

/* BOOTSTRAP */
@import "../node_modules/bootstrap/scss/bootstrap";

@import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

/* VDL-LIB */
@import "../dist/vdl-lib/styles";

/* DEMO APPLICATION STYLES */
$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome";

html, body {
  height: 100%;
}

This works great and at this point my components are styled correctly and the global layout styles are applied.

Now, here's where I'm running into an issue. The reason for SCSS is to be able to customize, right? In my header component (located in the library) I have some styling for a logo image:

.header-logo {
  display: flex;
  align-items: center;
  .name-brand {
    padding-right: $padding-base;
    img {
      height: $logo-height;
    }
  }
}

In the styles.scss (the one shown above) let's assume that I put in a variable re-assignment $logo-height: 68px immediately before @import "../dist/vdl-lib/styles";. When the application runs the component's logo size is not changed. I can see the height is set to what the original value is in my internal "variables" scss file.

Is this a substitution issue in SCSS or Angular? It doesn't appear so! From what I can tell when the library is built the output component style is compiled to CSS!

I come to this conclusion after looking in the fesm5 output js. I can find the decorators for the component and verify that it is CSS.

I have tried using styles instead of styleUrls on the component decorator. I removed the imports for my "variables" scss files. This made the output JavaScript appear to have the SCSS but running the demo application showed that none of the component styles were being applied. I'm not sure if there is some ordering issue that would be preventing the variables imported in the demo application's styles.scss from being consumed in the components. I haven't tried defining the variables in the angular.json yet, but I don't have much hope for it.

So, my question is this: Is it possible to make library components use and output SCSS so that a consuming application can customize any layout variables? Am I missing some configuration setting to tell Angular to build the demo application with the assumption that the styles in the consumed library are scss and need to be compiled?

yomateo yomateo · Accepted Answer · 2019-01-31T07:15:19

Make sure your styleUrls property points to a local file within the library like:

@Component({

    selector: 'ngxux-mat-login',

    template: `

       ..html stuff snip snip..
    `,

    styleUrls: [ './mycomponent.component.scss' ]

})

my scss:

:host {

    .wrapper {

        form {

            display: flex;
            align-items: center;
            justify-content: space-between;

            mat-form-field {

                margin: 10px;

            }

            .description {

                flex: 1;
                margin-right: 25px;

            }

        }

    }

}

So that should solve one of your problems. Your last problem regarding "inheriting" variables from a library will not work. You're going to have to create a global type directory and create symbolic links to it. The compiler has no notion of this (tbd).

If you need examples using libraries feel free to check out my usages at https://github.com/mateothegreat/ngxux/tree/master/projects.

Angular 6 Library Components and SCSS

1 Answers