Ionic 2重写sass项目

Question

我有一个Ionic 2应用，它有一个ion-searchbar。

      <div id="search" class="search-input-keyword">
        <ion-searchbar class="ion-searchtext" id="ion-searchtext" [(ngModel)]="searchQueryText" (ionFocus)="focusSearch($event)"
          (change)="onChangeText($event)" (ionClear)="onCancelText($event)" (ionInput)="onInputText($event)" placeholder="{{jobType === 0 ? favourite ? 'Market Favourites' : 'Market' : favourite ? 'Postings Favourites' : 'Postings'}}"
          debounce="1"></ion-searchbar>
      </div>

我想将输入文字颜色和放大镜图标颜色更改为#fff。

我已阅读here，为此，您需要更改sass变量。

我在variables.scss尝试了以下内容：

$colors: (
  primary:    #009196,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);
$searchbar-ios-input-text-color: #fff;
$searchbar-ios-input-search-icon-color: #fff;

但没有效果。

但是，以下行确实有效：

$text-color: #000099;

所以我想$searchbar-ios-input-text-color: #fff;和$searchbar-ios-input-search-icon-color: #fff;是个问题。

问题

有人可以建议如何更改字体和图标颜色吗？

由于

更新

以下是一些代码示例：

CSS

.toolbar-background-md {
    background: linear-gradient(to bottom right, #00a7ad, #004547);
}

.bar-button-default-md {
  color: #fff;
}

.searchbar-md .searchbar-input {
  background: linear-gradient(to bottom right, #009da3, #018287);
  //background-color: #009196;
}

input::-webkit-input-placeholder {
  color: red ;
}
input:-moz-placeholder {
  color: red ;
}
input:-ms-input-placeholder { /* IE10+ */
  color: red ;
}

.toolbar-title-md {
  padding: 0 12px;
  font-size: 2rem;
  font-weight: 500;
  color: #fff;
}

.close-filters {
    color: #fff;
    width: 52px;
    font-size: 22px;
    background-color: transparent;
    box-shadow: none !important;
}

.slide-fade-hide {
  transition: 1s all linear;
  opacity: 0;
  height: 0;
  position: absolute;
  top: 0;
  z-index: -10;
}

.slide-fade-show {
  transition: all 1.2s ease-in;
  opacity: 1;
  height: 2em;
  z-index: 1;
}

.list-md {
    margin: 0px 0px 0px 0;
}
.scroll-up {
    margin-top: 20px;
}

.menu-title {
    padding: 1px 95px 1px 10px;
}

.menu-toolbar {
    padding: 35px;
}

.menu-content {
    position: relative !important;
}

.item-search-wanted {
    padding-left: 1px;
}

.item-search-offered {
    padding-left: 1px;
}

.job-content-offered {
    background-color: white !important;
}

.job-content-wanted {
    background-color: white !important;
}

.search-button-star {
    background-color: #009196; 
}

.search-input-keyword {
    width: 125%;
    display: flex;
}

.search-input {
    width: 125%;
}

.toolbar-content {
  display: flex;
}

.extra-search-col {
    padding: 0px;
}

ion-col {
    padding: 2px;
}

ion-title {
    z-index: 11;
}

ion-avatar img {
    border-radius: 2.8rem;
    max-height: 5.6rem;
    max-width: 5.6rem;
}

.small-text-search {
    font-size: 75% !important;
    color: grey !important;
    padding-top: 4px;
}

.small-text-search-desc {
    font-size: 85%;
}

.small-text-search-rating {
    padding-top: inherit;
    padding-left: inherit;
}

.small-text-search-starrating {
    padding-top: 2px;
    font-size: 100% ! important;
}

.search-category {
    float: right;
}

.job-tite {
    width: 250px;
}

.job-timestamp {
    white-space: nowrap;
}

.search-rating {
    float: left;
}

.search-popover-button {
    width: 75px;
    height: 75px;
}

.button-icon-only ion-icon.search-popover-icon {
    font-size: 2.8em;
}

.filter-image {
    -webkit-filter : hue-rotate(-30deg) opacity(100%);
    filter : hue-rotate(-30deg) opacity(100%);
}

.icon-text {
    padding-left: 5px;
    padding-bottom: 3px;
}

.icon-text-no {
    padding-left: 5px;
}