CSS 库中组件的文件未随 angular 应用程序中的组件一起加载

Question

我在 angular 应用程序（使用 angular cli 生成）中开发了一个库，该库包含一个具有自己的模板文件和样式表的组件。但是，当我在 app.module.ts 和运行应用程序中加载模块时（为简单起见使用 ng serve），样式表中的样式不会呈现。

库是使用ng generate library
该库包含在应用程序的 projects 目录中
该组件存在于 <name of the component>/src/lib 目录中

app.module.ts 文件包含以下代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { GuitarChordGeneratorModule } from 'projects/guitar-chord-generator/src/public-api';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        GuitarChordGeneratorModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

下面是 guitar-chord-generator.component.ts 文件的片段：

import { Component, OnInit, Input } from '@angular/core';
import { Chord } from './chord';
import { GCSGConfig } from './gcsgconfig';

@Component({
    selector: 'lib-guitar-chord-generator',
    templateUrl: './guitar-chord-generator.component.html',
    styles: ['./guitar-chord-generator.component.css']
})

下图是app的目录结构

如您所见，guitar-chord-generator.component.css 是组件的 CSS 文件。

Answer 1

您的组件有

styles: ['./guitar-chord-generator.component.css']

The styles property takes an array of strings that contain CSS code.

你应该使用 styleUrls

styleUrls: ['./guitar-chord-generator.component.css']

CSS 库中组件的文件未随 angular 应用程序中的组件一起加载

CSS file of a component within a library does not get loaded with the component in angular app

css

styles

angular-cli

angular

angular-library