Настройка переменных SAAS в IONIC 6

#ionic-framework #saas

Вопрос:

У меня есть приложение ionic v6. я настроил свои глобальные переменные saas. Переменные saas прекрасно работают с обычными элементами css, но, похоже, не работают с ионными переменными.

 //.scss file
@import "./variables";
#page{
   .tube-button {
    --background: $red_color;
     font-size: $font-size;
  }
 }

//html
 <IonButton className="tube-button">Quick Book</IonButton>
 

переменная saas $red_color , определенная в _variables.scss, не работает с —background, поэтому мне приходится жестко кодировать цвет. Это, как я заметил, относится ко всем ионным переменным, которые я хочу переопределить в своих компонентах.

2-я строка с размером шрифта работает с переменной saas $font-size

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

Ответ №1:

Просто понял это. Эта проблема не имеет ничего общего с ИОННОЙ. Это поведение SAAS. Он игнорирует атрибуты с —. следовательно, для того, чтобы транспилирование работало с переменными CSS в saas, приведенный выше код должен измениться на

     --background: #{$red_color};