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

Question

今天我第一次开始使用ionic 3。我真的对它一无所知，所以这就是为什么我想了解它是如何工作的。

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

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

的类

Answer 1

在 app.scss 中您可以创建 class 像 class="class-name" 一样正常使用它们html.

希望对你有所帮助。

Answer 2

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

有些事情你想在全局范围内添加，例如，如果你想在 toast 消息中启用换行符，你可以添加以下内容：

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

如果您只想为 iOS 添加内容，请将其添加为 ios class:

的子元素

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

如果您只想为 Android（material 设计）添加一些内容，请将其添加为 md class:

的子元素

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

如果您需要，还有一个 wp class 用于 windows phone。

一定要看看ionics theming docs。

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

Using the app.scss file in an ionic 3 project

sass

stylesheet

styling

ionic3