Referencing css in angular

[junkmail291276]

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.

[ZooKeeper]

You don’t need to use require in the component for the sass files.

Are you receiving any build errors? Build errors are the first step to debugging these problems.

[junkmail291276]

So I’ve changed it to this:

styleUrls: [‘./landing.component.scss’, ‘…/…/…/scss/navbar.style.scss’ ],

…but still nothing.

There are no build errors.