Angular 12 library not including css styling on build

230 Views Asked by At

It's my first time trying to build a library in Angular, so I'm a little bit lost here. When I style my components with the assigned stylesheets, nothing follows into the actual library, leaving my components unstyled and mismatched to the rest of the application.

I tried just writing the code normally, of course, but ran into this issue. This is what the component.ts looks like:

import { KeyValue } from '@angular/common';
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'stat-table',
  templateUrl: './stat-table.component.html',
  styleUrls: ['./stat-table.component.css']
})
export class StatTableComponent implements OnInit {
  @Input() dataArray?: any[];
  @Input() titleArray?: string[];

  constructor() { }

  ngOnInit(): void {
  }

  originalOrder = (a: KeyValue<number,string>, b: KeyValue<number,string>): number => {
    return 0;
  }
}

Template:

<table>
    <tr>
        <th *ngFor="let title of titleArray">{{title}}</th>
    </tr>
    <tr *ngFor="let object of dataArray">
        <td *ngFor="let field of object | keyvalue: originalOrder">{{field.value}}</td>
    </tr>
</table>

And the stylesheet:

table {
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  tr {
    border: none;
    font-size: small;
  }
  
  tr:nth-child(even) {
    background-color: #ddd;
  }
  
  td,
  th {
    padding: 10px;
  }
  
  th {
    background-color: #ecf9f3;
  }
  

I have also tried to include a stylesheet as an asset in the ng-packagr for the project, but that also does absolutely nothing. Either way, my ng-package.json looks like this:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/library-name",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": ["./styles.scss"]
}

I have tested this component in a regular application project, and it all seems to run fine. Anyone have any guidance to give?

0

There are 0 best solutions below