I've encountered an issue where I can't use both styleUrls
and styles
in a Component (whichever is declared last takes precedence). What's the best way to work around this?
I'd like to use the ./board.component.css
file for base styles, but also want to incorporate the dynamically generated terrainStyles
string based on logic and data from a database.
I'm aware that I can write all my styles as strings, but I prefer to keep most of them within the css file. Is there a way to include logic within the css file or any other approach I may have overlooked?
Component({
selector: 'board',
templateUrl: './board.component.html',
styleUrls: ['./board.component.css'],
styles: [terrainStyles] // string generated using typescript logic
})
export class BoardComponent implements OnInit {
// ...
}