如何在一页中覆盖 Ionic2 sass 变量？答案

【问题标题】：How to override Ionic2 sass variable just in one page?如何在一页中覆盖 Ionic2 sass 变量？
【发布时间】：2017-12-08 05:27:38
【问题描述】：

我试图像这样覆盖 variables.css 中的 sass 变量

但这不是我想要的。

好像所有标签的样式都变了。

【问题讨论】：

【解决方案1】：

您只需要在需要申请的页面组件上进行如下所示的操作即可。

my.scss

.ios,
.md,
.wp {
    page-my {
        .margin-top-15 {
            margin-top: 15px;//this is just an example
        }

    }
}

【讨论】：

【解决方案2】：

目前，不可能在单个页面中覆盖 sass 变量，它根本不起作用。

这是对 ionic 论坛中报告的类似问题的回应：

一个有用的解决方案是ionic 服务您的项目，在浏览器上打开检查器，检查所需的元素并查看其生成的离子在 .scss 文件中手动覆盖它们的类。

【讨论】：

【解决方案3】：

目前您无法在一页中更改 sass 变量。这不是 sass 的工作方式。 Sass 旨在用作全局设置。

有一种变通方法可以改变例如装载容器的背景。

大多数情况下你都可以这样做。

如果您打开开发人员工具并在加载包装器上选择检查元素，它会提供类 .loading-wrapper，如下图链接所示。

在你的 app.css 中

 .loadingCss {

  .loading-wrapper {
    color: #f4f4f4;
    background: #2979ff;
  }
}

在你的组件中添加类到你的加载创建实例

    //initialize a loading overlay
let working = this.loadingCtrl.create({
  content: 'Working...',
  spinner: 'dots',
  cssClass: 'loadingCss'
});

现在您可以创建多个加载实例，并有单独的加载类并将它们添加到您的实例中，css 将生效。

最终结果如下图链接所示。

希望对你有帮助

【讨论】：