Ionic 2 SplitPane 更改 sass 变量不起作用答案

【问题标题】：Ionic 2 SplitPane changing sass variables not workingIonic 2 SplitPane 更改 sass 变量不起作用
【发布时间】：2018-09-27 00:42:56
【问题描述】：

我正在使用split-pane组件，想根据我的要求更改左侧面板的最小宽度和最大宽度。

为此，我从 variables.scss 文件中的 ionic 文档更改为 SplitPane 提供的 sass 变量。

但在执行 ionic serve 后，更改并未反映在 main.css 文件中。

首先我认为这可能是 sass 的问题，但我更改了另一个名为 @background-color 的变量并且它起作用了。

请问有人可以帮忙吗？

这是离子信息

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

local packages:

    @ionic/app-scripts : 1.1.4
    Ionic Framework    : ionic-angular 2.2.0

System:

    Node : v6.11.1
    npm  : 3.10.10
    OS   : Windows 10

Misc:

    backend : legacy

谢谢。

【问题讨论】：

Please don't post your code as an image.

标签： css ionic-framework sass ionic2

【解决方案1】：

根据文档here

默认情况下，当屏幕大于 768px 时，SplitPane 会展开。如果要自定义，请使用 when 输入。 when 输入可以接受任何有效的媒体查询，因为它在下面使用 matchMedia()。

<ion-split-pane when="(min-width: 475px)">

  <!--  our side menu  -->
  <ion-menu [content]="content">
  ....
  </ion-menu>

  <!-- the main content -->
  <ion-nav [root]="root" main #content></ion-nav>
</ion-split-pane>

您也可以在您的代码中自定义它

<ion-split-pane [when]="shouldShow()">
...
</ion-split-pane>
class MyClass {
  constructor(){}
  shouldShow(){
    if(conditionA){
      return true
    } else {
      return false
    }
  }
}

【讨论】：