Referencing css in angular


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>

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/";

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

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';

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

As you can see, I’m requiring both landing.component.scss and

Yes, 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.

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.

So I’ve changed it to this:

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

…but still nothing.

There are no build errors.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.