为什么 ionic 4 中的主应用程序 scss 文件不起作用？

Question

我一直在开发 ionic 应用程序，我要对其进行一些样式设置，但我遇到了 app.scss 的问题。

根据 ionic 文档，我应该可以将 app.scss 用于应用程序范围内的样式，例如工具栏等。但是当我尝试从该文件中设置任何样式时，没有任何反应，就像它不是包含在构建中？

初始项目是通过在 CLI 中创建应用程序并以侧边栏菜单选项作为模板完成的，所有 scss 文件在各个组件中都可以正常工作。

知道为什么 app.scss 文件不起作用吗？我检查了我尝试设置样式的元素，但根本没有拾取它们。

一个例子：

ion-title {
  background: red;
}

这不起作用，工具栏背景不会改变，但它会通过 chrome 检查器改变。

我也在 global.scss 中尝试过这个，但仍然没有，有趣的是，如果我将 display:none 应用于所有有效的元素：

* {
  display: none;
}

它似乎不想像“ion-title”这样的单个元素设置样式

更新：

ionic 4 中似乎有一个错误，styleUrls 不接受我添加 ../app.scss ，它会引发错误，但我可以包含 ../app.css 所以我只是将 scss 自动编译为 css.

然后我可以在每个组件中包含 app.css 文件并且它正在运行！

Answer 1

您必须像这样在 app.component.ts 中包含 app.scss 文件的路径

styleUrls: ['app.scss']

然后你就可以使用你的scss文件了

Answer 2

在 Ionic 4 中，全局样式默认保存在 src/app/global.scss

如果这是从 Ionic 3 模板转换的 Angular 项目，则必须在 projects/app/architect/build/styles 下的 angular.json 文件中添加对全局 scss 文件的引用, 如下图

"styles": [
  {
    "input": "src/theme/variables.scss"
  },
  {
    "input": "src/global.scss"
  }
],

这是对 Ionic 3 的更改，它以前位于 src/app/app.scss 中。如果您在 Ionic 3 或更早版本中创建了一个项目，则必须将您的样式移动到一个新的 global.scss 中，以便将它们应用于整个应用程序

Answer 3

ionic 4 中似乎有一个错误，styleUrls 不接受我添加 ../app.scss ，它会抛出错误，但我可以包含 ../app.css 所以我只是要去 auto-compile scss 到 css.

然后我可以在每个组件中包含 app.css 文件并且它正在运行！

why does the main app scss file in ionic 4 not work?