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变量。导致问题的原因是App Maker前缀为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);
}

有一种简单的方法可以欺骗App Maker使变量有效：

/* 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);
}

它会起作用，但不保证App Maker将来会关闭此门（或修复原始问题）。

我还会考虑将所有变量移动到CSS文件中并将其添加为外部CSS资源（我不确定编辑器是否会在设计时将其添加）。

当然可以随意向App Maker团队提交错误：https://issuetracker.google.com/issues/new?component=192783&template=833410

AppMaker剥离CSS变量

1 个答案: