使用本地 scss 样式化 Ionic2 模板

Question

在 /app/pages/mypage 下成功添加新的 mypage.html 和 mypage.ts 页面后，我还想将我的对象对齐到我的页面中心，所以我创建了一个 mypage.scss文件内容：

.centered {
  text-align: center;
}

另请注意，我在 mypage.html <ion-content> 标签上添加了 class centered。

我发现，当我为我的页面提供服务时，gulp 不会编译并将我自己的样式添加到 /www/build/css 文件。我是漏掉了什么还是有问题？

Answer 1

您需要像这样将其包含在 app.core.css 文件中：

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

第一个mypage是文件夹名，第二个是文件名（不需要扩展名）

Answer 2

好的，我发现您还必须将文件导入 /app/theme/app.core.scss。我真的不认为离子团队是一个好的解决方案（更糟糕的是我在任何地方都没有看到这个）。

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

Styling Ionic2 templates with local scss