AppMakerはCSS変数を削除します

Question

Google App MakerでCSS変数を使用することはできますか？

:root { 
    --pale-grfn-grey: #e0dcd5; 
} 

.app-header-header { 
    border-bottom: 1px solid red; 
    border-bottom-color: var(--pale-grfn-grey); 
} 

展開またはプレビューアプリが定義またはborder-bottom-color呼び出しのどちらかが含まれていません。

他のウェブサイトやアプリで使用する外部CSSを維持していますが、これを使用するのが最善の手段ですか？

Answer 1

実際、App MakerはCSS変数を削除しません。この問題の原因は、Global Stylesの接頭辞が#appとなっているため、初期変数の設定が壊れています。

/* Design time Global CSS */ 
:root { 
    --customColor: red; 
} 

.app-MyPage-MyPage { 
    background-color: var(--customColor); 
} 


/* Runtime time Global CSS */ 
#app :root { 
    --customColor: red; 
} 

#app .app-MyPage-MyPage { 
    background-color: var(--customColor); 
} 

変数を動作させるためにアプリのメーカーをカンニングする簡単な方法があります：それは動作します

/* Design time Global CSS 
    NOTE: there is no :root in the beginning BUT 
    there is a whitespace OR new line */ 
{ 
    --customColor: red; 
} 

.app-MyPage-MyPage { 
    background-color: var(--customColor); 
} 

/* Runtime time Global CSS */ 
#app { 
    --customColor: red; 
} 

#app .app-MyPage-MyPage { 
    background-color: var(--customColor); 
} 

が、アプリのメーカーは、将来的にこのドアを閉じて（または修正するという保証はありません元の問題）。

また、すべての変数をCSSファイルに移動して外部CSSリソースとして追加することも検討します（エディタが設計時にそれを取り上げるかどうかはわかりません）。

また、App Makerチームにバグを報告してください。https://issuetracker.google.com/issues/new?component=192783&template=833410