I am building an application with Angular and bootstrap in the front-end, basically I have a Landing page, login and dashboard after logged.
The question is about how to handle the style sheets between the application. The land page and the dashboard have styles completely distinct. The Landing page looks like this and the dashboard looks like this image.
I've made different css files to handle each part of the application and now I am trying to join in the Angular app, but if I add those css files in the styles array in angular-cli.json, the angular will add both in the index and I will have some class conflict and the file from the dashboard on the landing and vice versa.
I'll appreciate any help to handle this situation.
Normally your components will be like
@Component({
selector: 'app-component-uno',
templateUrl: './app-component-uno.html',
styleUrls:['./app-component-uno.css'] //<--this
}.....)
The css is belong to the component.there are no conflict. The only way that you hace a conflict is if you use encapsulation: ViewEncapsulation.None,