Specify CSS files per Module in angular2

Question

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?

Angela P · Accepted Answer · 2017-05-31 18:45:12Z

3

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

answered May 31, 2017 at 18:39

Angela P

2,0292 gold badges16 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1