SCSS不工作IONIC2 / 3项目

Question

我使用Stackblitz中的标签模板有一个简单的Ionic2 / 3示例。 我正在尝试改变 P ＆amp;的大小。颜色，但它没有工作（没有错误信息）。

home.scss

page-home{
  p {
    font-size: 100px !important;
    color: red;
  }
}

home.html的

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <p>TEST SHOULD BE 50PX</p>  <!-- there is no change here -->
</ion-content>

Answer 1

您需要导入组件中的样式。这是您的组件定义应该是这样的：

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styleUrls: ['./home.scss']
})

此外，您的CSS选择器是错误的。我不知道page-home应该做什么。我建议为ion-content元素分配一个类。

<强> SCSS：

.page-content {
  p {
    font-size: 100px !important;
    color: red;
  }
}

<强> HTML：

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="page-content" padding>
    <p>TEST SHOULD BE 50PX</p>  <!-- there is no change here -->
</ion-content>

这是一个有效的example。

Answer 2

对于单独的SCSS，您必须使用选择器。

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styleUrls: ['./home.scss']
})

<强> SCSS

来自@Component的选择器和SCSS文件的Parent类必须相同。

.page-home {
  p {
    font-size: 100px !important;
    color: red;
  }
}

GLOBAL SCSS

您可以使用 APP.SCSS 文件中的SCSS。这不需要选择器。