search

blackbaud / skyux2

SKY UX 2 is the new version of Blackbaud’s user experience framework that implements Blackbaud design patterns. It extends the framework to abstract many complexities of modern web development and takes advantage of Angular 2 to increase the tooling, testing, and performance available.
https://developer.blackbaud.com/skyux
MIT License
32 stars 65 forks source link

Document workaround for multiple styleUrls for a component #2169

Closed blackbaud-johnly closed 5 years ago

blackbaud-johnly commented 5 years ago

Document workaround for https://github.com/blackbaud/skyux2/issues/1547 where the build fails if a component in the library references more than one styleUrls. Also should probably note the formatting called out in https://github.com/blackbaud/skyux2/issues/1547.

@Blackbaud-BrandonJones alerted me to the need for documentation about the workaround. Here's the info I got from him:

The workaround that SKY UX recommends is to only declare a single .scss file in the styleUrls array for the component.

  selector: 'my-component',
   templateUrl: 'someUrl.html',
   styleUrls: ['style-sheet.scss']
})

If you require additional style sheets, import them directly into your components main .scss file.

style-sheet.scss:

@import './second-sheet.scss';

.my-componet {
  background-color: red;
}

We need to update the docs at https://developer.blackbaud.com/skyux/learn/get-started/basics/edit-project#create-a-component. I'm not sure if we want to document the workaround there or just add a note there and then document the workaround somewhere else. If the latter, I'm not sure where that somewhere else would be. Maybe a new procedure within that big edit-project topic. Or maybe a new styles topic in the references section. (In which case, we probably need to include some basics about .scss files and add then the workaround as a subsection or child topic.)

blackbaud-johnly commented 5 years ago

Closing this because we want to fix the issue in Builder and do not want to document the workaround. I copied the description of the workaround over to https://github.com/blackbaud/skyux2/issues/1547 so that it is available if people come across this issue before we address it.