CODEWITHSUNDEEP
angulartypescript
Red Twoon
Red Twoon

Reputation: 755

Angular 2, StyleUrls + Styles

I'm unable to use both styleUrls + styles in Component (It appears whichever is declared last gets used). What is the best way to get around this?

I want to use the ./board.component.css to declare the base styles, but want to add the terrainStyles string which is generated using logic+data from DB.

I know I can write all my styles as strings, but I'd like to keep the majority of my styles within the css file. Is there a good way to include logic in the css file? Or something I haven't considered?

Component({
  selector: 'board',
  templateUrl: './board.component.html',
  styleUrls: ['./board.component.css'],
  styles: [terrainStyles] // string generated using typescript logic
})
export class BoardComponent implements OnInit {
  // ...
}

Upvotes: 2

Views: 1145

Answers (1)

tenderloin
tenderloin

Reputation: 1001

I'm using Webpack and had the same problem when trying to use both the styles and styleUrls properties.

I got around it by requiring the stylesheet I had defined in styleUrls in the style property instead.

styles: ['.something { display: block; }', require('./stylesheet.component.css')]

Upvotes: 1

Related Questions