4

I have an angular-cli app and using webpack. When I try to run it the component specific css doesn't work

styles.css

    /* You can add global styles to this file, and also import other style files*/
@import 'http://something/v4/dist/css/bootstrap.min.css';

Component

@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.css']
})
export class CarouselComponent implements OnInit {

Component CSS

.carousel-indicators { display: none; }

angular-cli.config

 "styles": [
        "styles.css",
        "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-bold.scss",
        "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-light.scss",
        "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-regular.scss"       
      ],

The rendered html

<style type="text/css">@import url(http://something/v4/dist/css/bootstrap.min.css);</style>
<style type="text/css">/* You can add global styles to this file, and also import other style files */
</style><style></style><style>.carousel-indicators[_ngcontent-c5] { display: none; }</style>

but this is not applied to my html element 'carousel-indicators' If I import the carousel.component.cssinto the styles.css then it works but it appears twice in the generated html

I'm looking for the right way of doing this

Improve this question
2
  • maybe because i'm mixing scss and css? Commented Aug 30, 2017 at 0:15
  • I found the answer to my question here : stackoverflow.com/questions/45788972/… Commented Aug 30, 2017 at 20:41

2 Answers 2

Reset to default
2

By default(as in your case) angular using ViewEncapsulation.Emulated that scopes your css. However there is 3 view encapsulation options in Angular:

  • Native view encapsulation uses the browser's native shadow DOM implementation (see Shadow DOM on the MDN site) to attach a shadow DOM to the component's host element, and then puts the component view inside that shadow DOM. The component's styles are included within the shadow DOM.

  • Emulated view encapsulation (the default) emulates the behavior of shadow DOM by preprocessing (and renaming) the CSS code to effectively scope the CSS to the component's view. For details, see Appendix 1.

  • None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

So when you applying any styles to your component in component.css(with default ViewEncapsulation.Emulated) the styles will be applied just for that particular component, it won't be leaked outside the component and always have a priority above the global styles unless global style has !important.

So as a result you have the style in the head of your html file like:

<style>.carousel-indicators[_ngcontent-c5] { display: none; }</style>

If you referencing your component.css in styles.css then it will became a global style rendered in html head like so: 

<style type="text/css">/* You can add global styles to this file, and also import other style files */
.carousel-indicators {
  display: none; }
</style>

As you declared you style in competent and then referenced your component.css in styles.css that competent styles just gets doubled in your html: one copy is a global style and other copy is scoped component styles.

I was tried to replicate you issue but my compentnt.css is always gets applied. I am using the latest stable angular cli 1.3.2. If you are using older cli try to update. Otherwise push your code on github or create a plunker so I can take a look.

UPDATE: You might have your custom css gets overridden by some of your global stylesheets you are referencing. You can use chrome dev tools to debug the styles also you can try to put !important to your custom css and see if it does help.

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

1 Comment

I updated my angular cli, I still have the error. I think it's from the fact that I'm using a ng-boostrap component (carousel) because if I put css in another component, it works fine
1

For everybody landing here :

The issue was with the ViewEncapsulation.Emulated I changed it to ViewEncapsulation.None as describe in this stackoverflow answer :

how to hide ngb-carousel indicators and prev-next control

Thanks for your help

Improve this answer

1 Comment

ViewEncapsulation.None adds your component.css styles to the global styles, that what it is. Also this way your component styles loosing the scope, etc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.