Ionic 2 SplitPane更改sass变量无法正常工作

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ionic 2 SplitPane更改sass变量无法正常工作相关的知识,希望对你有一定的参考价值。

我正在使用分屏窗格组件,并希望根据我的要求更改左侧面板的最小宽度和最大宽度。

为此,我在variables.scss文件中更改了离散文档中SplitPane提供的sass变量。

enter image description here

但这种变化并没有反映在做离子发球后的main.css文件中。

enter image description here

首先我认为这可能是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

谢谢。

答案

根据文件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
    }
  }
}

以上是关于Ionic 2 SplitPane更改sass变量无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章

Ionic 2之node-sass问题解决办法

无法为 Ionic 安装 node-sass

ionic使用sass

如何使用js更改sass文件中的变量

如何在 Ionic 框架中使用 SASS?

错误('`libsass` 未找到绑定。尝试使用运行 ionic 的 node-sass 重新安装 `node-sass`?')