使用本地scss为Ionic2模板设置样式

时间:2016-08-25 14:10:33

标签: ionic2

基于本教程,我从教程模板http://ionicframework.com/docs/v2/getting-started/tutorial/adding-pages/开始了一个ionic2项目。

mypage.html下成功添加新的mypage.ts/app/pages/mypage页面后,我还希望将对象对齐到我的页面中心,因此我创建了一个mypage.scss文件内容:

.centered {
  text-align: center;
}

另请注意,我在centered mypage.html标记上添加了课程<ion-content>

我发现当我提供页面时,gulp不会编译并将自己的样式添加到/www/build/css文件中。我错过了什么或是有缺陷吗?

2 个答案:

答案 0 :(得分:1)

您需要将其包含在app.core.css文件中,如下所示:

@import "../pages/mypage/mypage";

第一个 mypage 是文件夹的名称,第二个是文件的名称(不需要扩展名)

答案 1 :(得分:0)

好的,所以我发现您还必须将文件导入/app/theme/app.core.scss。我不认为这是离子团队的一个很好的解决方案(更糟糕的是,我没有看到任何地方提到这一点)。

我认为您可以编辑gulpfile来获取app目录下的所有scss文件,这样您就不必将每个文件导入app.core.scss