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 变量。问题的原因是 App Maker 以 #app 为前缀 Global Styles，这会破坏您的初始变量设置。

/* 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 个变量

AppMaker strips CSS variables

google-app-maker