如何在Angular 7中获取组件的CSS文件内容？

Question

我想获取组件的CSS文件内容。

例如：

你好，world.component.ts：

@Component({
    selector: 'app-hello-world',
    template: `<h1>Hello World</h1>`,
    styleUrls: ['./hello-world.component.css']
})

export class HelloWorldComponent {
    getCSSContent(){
    }
}

你好，world.component.css：

h1 {
    color: red;
    font-weight: 400;
}

我希望getCSSContent函数返回：

h1 {
    color: red;
    font-weight: 400;
}

Answer 1

在'src'文件夹中添加一个具有以下名称的新文件：

typings.d.ts

具有以下内容：

declare module '*.css';

在您的组件中添加：

import helloWorldCss from './hello-world.component.css'

你可以阅读你的CSS

getCSSContent(){
    return helloWorldCss;
}

我在helloWorldCss变量的末尾识别出一些奇怪的文本。也许你必须修剪它。