I'd like to get the CSS file content of a component.
For example:
hello-world.component.ts:
@Component({
selector: 'app-hello-world',
template: `<h1>Hello World</h1>`,
styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent {
getCSSContent(){
}
}
hello-world.component.css:
h1 {
color: red;
font-weight: 400;
}
I expect getCSSContent function to return:
h1 {
color: red;
font-weight: 400;
}
In the folder 'src' add a new file with following name:
typings.d.ts
with the following content:
declare module '*.css';
In your component add:
import helloWorldCss from './hello-world.component.css'
and you can read your css with
getCSSContent(){
return helloWorldCss;
}
I recognized some weird text at the end of the helloWorldCss variable.. maybe you have to trim it.
helloWorldCss will be the WebPack module that was created at compile time. I know, because I tried this same thing last week. :)
this.http.get('./app.component.css').subscribe(data => { console.log('data', data); })(http request with httpClient)<script>tag created by Angular. What I did, was to make a copy of the CSS file to my/assets/folder and read it from there.