CODEWITHSUNDEEP
angular
Moustafa Elkady
Moustafa Elkady

Reputation: 670

Specify CSS files per Module in angular2

I have angular 2 project which have 2 Modules, one for web and one for admin.

I put the main styles for web in style.css (specified in .angular-cli.json)

@import "../node_modules/bootstrap/dist/css/bootstrap.css";

and it work great, but the style.css code appear every where in both web and admin, i want to separate it completely.

is there any way to set specific CSS style files for each Module?

Upvotes: 1

Views: 2127

Answers (1)

Angela P
Angela P

Reputation: 2029

for the 2 modules that you have, web module can have: 

@Component({
  selector: 'app-web',
  templateUrl: './web.component.html',
  styleUrls: ['./web.component.css']
})

and admin module can have: 

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})

The file linked in styleUrl only applies to that component. so you can separate the css styles for each component this way.

If your styles are very short and you don't want to create a separate file for each component, there are other ways of applying styles to a particular component: https://angular.io/docs/ts/latest/guide/component-styles.html

Upvotes: 3

Related Questions