Angular 2 Global Style - Load only one css file

Question

I have a problem in Angular 2 with loading styles. I load style (css) only once, in index.html, but when I split my page in components everything goes wrong. I noticed that when I create only one component with entire html code everything is fine.

It's necessary to split css code? I don't want to do that.

I put here some file, I hope to understand my problem.

Thanks for helping.

My page when I split the html page in components

dashboard.html

<div class="body_wrap_t t">
    <div class="main_wrap r">
        <div class="main_wrap_row c">
            <div class="main_wrap_inner_container t">
                <div class="main_wrap_inner_container_row r">

                    <sidebar-wrap></sidebar-wrap>

                    <right-wrap></right-wrap>

                </div><!-- r --><!-- END main_wrap_inner_container_row -->
            </div><!-- t --><!-- END main_wrap_inner_container -->
        </div><!-- c --><!-- END main_wrap_row -->
    </div><!-- r --><!-- END main_wrap -->
    <footer-wrap></footer-wrap>
</div><!-- t --><!-- END body_wrap -->

right-wrap.component.ts (for example)

import { Component } from '@angular/core';

@Component({
  selector: 'right-wrap',
  templateUrl: 'src/app/pages/dashboard/right-wrap/right-wrap.html',
  // styles: [ './content.css' ],
})
export class RightwrapComponent {

}

And dashboard.component.ts where is my base page component

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { Router } from '@angular/router';

@Component({
  selector: 'dashboard',
  templateUrl: 'src/app/pages/dashboard/dashboard.html',
})
export class DashboardComponent {

}

You can have global styles, applied to all components, or component styles, which are only applied to one component. In your case you probably need to fix your global styles to fix the alignment issues. — Boland
– Boland, Commented Nov 4, 2016 at 0:15

KaFu · Accepted Answer · 2016-11-04 06:58:37Z

1

If you want to use only one file you load it in your index.html of your project. Do not load any other css files in your Components.

But I would always suggest you to split your css in multiple files. It is more legible when you take a look to it in some weeks, months or years. =) Also you faster know where your mistake is or where you have to make changes.

answered Nov 4, 2016 at 6:58

KaFu

2,3241 gold badge13 silver badges12 bronze badges

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

3 Comments

FACode Over a year ago

Thanks for answer. I know that is better to split css in multiple files but this css is very hard to be splitted. @KaFu

FACode Over a year ago

I think that the problem is with selectors, when I split the HTML, for example for navbar, I add the navbar HTML into 'navbar' selector, so in this <navbar></navbar> HTML attribute. I hope you understand :)

FACode Over a year ago

Hey, I solve the problem. The problem was on my global css, some classes depends on other. Anyway, you answer is good, and as you said it's better to split css file. Thanks for your answer. @KaFu :)

Collectives™ on Stack Overflow

Angular 2 Global Style - Load only one css file

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related