Ionic SCSS 通过 ionic.app.scss 修改默认样式

首先,你需要下载一个 SCSS 文件的编译软件,这里使用的是 Koala

接着当然是使用 Koala 关联我们的文件:根目录/scss/ionic.app.scss,修改后生成的 ionic.app.css 文件默认是在同目录下。

然后需要编辑 ionic.app.scss 文件,一开始可能 Koala 会报错,稍微修改一下:

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

改为:

// Include all of Ionic
@import "../www/lib/ionic/scss/ionic";

修改 ionic.app.scss 文件,切记要把注释 /* …. */ 去掉,不然怎么修改也不起作用哦。这里主要可以对默认的颜色进行修改。

最后,把编译生成的 ionic.app.css 文件复制到 根目录/www/css/ 路径下,接着到 index.html 里调用该 CSS 文件,为避免重复,注释掉原来的 ionic.css:

找到:

<link href="lib/ionic/css/ionic.css" rel="stylesheet">

改为:

<!--link href="lib/ionic/css/ionic.css" rel="stylesheet"-->
<link href="css/ionic.app.css" rel="stylesheet">

通过以上方法,就可以改变默认的样式了,app 主题颜色也可以随心所欲了。

相关文章