在 ionic 3 项目中使用 app.scss 文件答案

【问题标题】：Using the app.scss file in an ionic 3 project在 ionic 3 项目中使用 app.scss 文件
【发布时间】：2017-10-26 12:08:23
【问题描述】：

今天我第一次开始使用 ionic 3。我对此一无所知，所以我想了解它的工作原理。

我已经创建了一个 sidemenu 项目，现在我想在我的 app.scss 中添加一些全局样式，这样我就可以在我的项目的任何页面中使用它。好吧，我在 app.scss 中添加了简单的样式，但我的页面上没有任何反应。一切看起来还是一样。现在我的问题是：我必须在某处导入 app.scss 吗？如果有，在哪里？或者我该如何使用 app.scss？

我认为它会自动发生，我的页面也使用我的 app.scss 的类，而不仅仅是它自己的样式表，但对我来说，它似乎甚至不知道 app.scss 的类。

【问题讨论】：

标签： sass stylesheet ionic3 styling

【解决方案1】：

在 app.scss 中，您可以创建类，通常将它们用作 html 上的 class="class-name"。

希望我能帮到你。

【讨论】：

嗯，这正是我所做的，但它不会改变我页面上的样式。我也认为这有点奇怪，因为仅仅添加一些全局样式并没有那么难，但是它不起作用而且我不知道为什么。
我用这种方式ion-app { .warning { color: color($colors, warning); } }。它对我有用。
请发布您的 app.scss 问题。
大声笑我忘了把它放在 ion-app 括号中。现在它工作正常。

【解决方案2】：

您可以直接使用它，无需在任何地方导入。不过要记住几点：

您想在全局范围内添加一些内容，例如，如果您想在 toast 消息中启用换行符，请添加以下内容：

.toast-message {
  white-space: pre-line;
}

如果您只想为 iOS 添加一些内容，请将其添加为 ios 类的子元素：

.ios {
  ... // your iOS-specific css rules
}

如果您只想为 Android 添加一些东西（材料设计），请将其添加为 md 类的子元素：

.md {
 ... // your android-specific css rules
}

如果你需要的话，还有一个用于 windows phone 的 wp 类。

请务必查看ionics theming docs。

【讨论】：