The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

539534 (6) [Avatar] Offline
#1
Hello,

I working in an Angular 2 application. I'm very new to Angular. I'm wondering why my CSS is not working.

I have three files:

* landing.component.html
* landing.component.scss
* landing.component.ts

landing.component.html looks like this:

<div class="c-nav__left">
<img src="/public/imgs/logo@2x.png" width="145px" height="64px" />
<span class="_navbarLogoText">Risk Alive</span>
</div>

Welcome to the landing page!

There's a couple style class I'm referencing there: c-nav__left and _navbarLogoText.

Now here's landing.component.scss:

@import "../../../scss/base.scss";
@import "../../../scss/navbar.style.scss";

All that landing.component.scss does is import other scss files from elsewhere in the application. The class seen in landing.component.html are in navbar.style.scss.

Then there's landing.component.ts:

import { Cookie } from 'ng2-cookies/ng2-cookies';
import { Component } from '@angular/core';
import { ModalService } from '../../../app/common/services/modal.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
templateUrl: './landing.component.html',
styles: [require('./landing.component.scss'), require('../../../scss/navbar.style.scss') ],
providers: [ ModalService ],
})
export class LandingComponent {
....
}

As you can see, I'm requiring both landing.component.scss and navbar.style.scss.

Yes, navbar.style.scss is being referenced twice. I'm trying both approaches: referencing it by an import statement in the scss files itself and also by a require statement in the typescript file.

But neither of these work. I do not see my styles on the page.

Can anyone suggest what I'm doing wrong? Thank you.