css - 库中组件的 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 文件。

标签： cssangularstylesangular-cliangular-library

Answer 1

你的组件有

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

styles 属性接受一个包含 CSS 代码的字符串数组。

你应该使用styleUrls

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