Ionic2实战-框架样式自定义

前言

对于拥有众多页面的App来说，首先考虑的就是如何写样式，样式分三种：1、框架级样式；2、自定义全局样式；3、自定义页面私有样式。
本节主要讲这三种样式如何分别定义。

步骤

1、框架级样式

image.png

如上图，框架初始化好以后会自动生成variables.scss文件，在该scss文件内定义的样式作用范围为全局，一般如果要覆盖框架的默认样式可以直接在该文件内进行覆盖。

2、自定义全局样式

自定义全局样式可以直接写在variables.scss文件内，也可以单独定义一个scss文件，然后通过“@import "main"”的形式引入variables.scss文件内，均可作用于全局。

3、自定义页面私有样式

页面私有样式配合页面html和ts文件使用，只作用于指定页面，如下图：

image.png

image.png