库中组件的 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']
})

下图是应用的目录结构。

如您所见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']