Как переопределить переменную sass Ionic2 только на одной странице?

Question

Я пытался переопределить переменную sass в variables.css, как это

но это не то, что я хочу.

Кажется, чтобы изменить стили всех вкладок.

Answer 1

Вам просто нужно сделать, как показано ниже на странице компонента, который вы должны применить.

my.scss

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

    }
}

Answer 2

В настоящее время вы не можете изменить sass-переменные на одной странице. Это просто не так, как работает sass. Sass предназначен для использования в качестве глобальной настройки.

Существует способ обойти изменения, скажем, например, фон загрузочного контейнера.

Вы можете сделать это для большинства.

Если вы откроете инструменты разработчика и выберете inspect element в загрузочной оболочке, он выдаст класс.loading-wrapper, как показано на изображении ниже.

Класс CSS для загрузки показан в элементе inspect

В вашем app.css

 .loadingCss {

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

в вашем компоненте TS добавить класс в ваш экземпляр создания загрузки

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

Теперь вы можете создать несколько экземпляров загрузки и иметь отдельные классы для загрузки и добавить их в свой экземпляр, и CSS вступит в силу.

Окончательный результат показан в ссылке на изображение ниже.

Загрузка оверлеев с помощью пользовательских CSS на двух страницах

надеюсь, это поможет

Answer 3

В настоящее время невозможно переопределить переменную sass на одной странице, она просто не работает.

Это ответ на аналогичную проблему, о которой сообщалось на форумах Ionic

https://github.com/ionic-team/ionic/issues/7469

Одним из полезных решений является ионное обслуживание вашего проекта, открытие инспектора в браузере, проверка нужного элемента и просмотр его сгенерированных ионных классов для их перезаписи вручную в файле .scss.