Question

我一直在开发离子应用程序，已经对其进行了一些样式设计，但是app.scss出现了问题。

根据离子文档，我应该能够将app.scss用于应用程序范围的样式，例如工具栏等，但是当我尝试对该文件中的任何内容进行样式设置时，什么也没有发生，就像它没有包含在构建中？

通过在CLI中使用侧边栏菜单选项作为模板创建应用程序来完成初始项目，并且所有scss文件在单个组件中均可正常运行。

您知道为什么app.scss文件不起作用吗？我已经检查过我尝试设置样式的元素，而这些元素根本没有被拾取。

一个例子：

ion-title{
    background:red;
}

这不起作用，工具栏背景也没有更改，但是通过chrome inspector可以实现。

我也曾在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文件的引用，如下所示< / p>

            "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，所以我只是要将scss自动编译为CSS。

然后我可以在每个组件中包含app.css文件，并且它可以正常工作！

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

3 个答案: