Question

我在Angular 2应用程序中工作。我对Angular很新。我想知道为什么我的CSS没有用。

我有三个文件：

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

landing.component.html如下所示：

<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!

我在那里引用了几个样式类：c-nav__left和_navbarLogoText。

现在这里是landing.component.scss：

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

所有landing.component.scss都会从应用程序的其他位置导入其他scss文件。 landing.component.html中显示的类位于navbar.style.scss。

然后是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 {
    ....
}

如您所见，我需要landing.component.scss和navbar.style.scss。

是的，navbar.style.scss被引用了两次。我正在尝试这两种方法：通过scss文件本身的import语句以及typescript文件中的require语句引用它。

但这些都不奏效。我在页面上看不到我的风格。

任何人都可以建议我做错了吗？谢谢。

Answer 1

您不应该使用require param中的styles @Component装饰器 - 而是使用styleUrls：

styleUrls: ['./landing.component.scss']

引用角

1 个答案: