谷歌应用脚本，不能包含 css答案

【问题标题】：Google apps script, can not include css谷歌应用脚本，不能包含 css
【发布时间】：2015-07-27 08:46:55
【问题描述】：

我是谷歌应用脚本的新手。我尝试了一些示例，效果很好，但我坚持包含 css 文件。

在我的 code.gs 中，我创建了包含函数：

function include(filename) {
   return HtmlService.createHtmlOutputFromFile(filename)
  .getContent();
}

我还创建了 css 文件“Sidebar.css.html”，其中包含一些样式参数：

<style>
.branding-below {
 bottom: 56px;
 top: 0;
}

.branding-text {
left: 7px;
position: relative;
top: 3px;
}

.col-contain {
overflow: hidden;
}

.col-one {
float: left;
width: 50%;
}

.logo {
vertical-align: middle;
}

.radio-spacer {
height: 20px;
}

.width-100 {
width: 100%;
}
</style>

在我的 Sidebar.html 中，我尝试包含 css：

<?!= include('Sidebar.css.html'); ?>

这显然不起作用。结果如下：

在这个链接中你可以看到结果（我没有足够的代表来发布它，对不起）：http://dl1.joxi.net/drive/0005/1191/378023/150727/371cdf01c0.jpg

我该怎么办？

【问题讨论】：

您是否明确输入了“.html”？如果没有，请不要包含它，只包含文件名<?!= include('Sidebar.css'); ?>。如果有，请分享整个 code.gs。

标签： javascript html css google-apps-script google-sheets

【解决方案1】：

您需要使用createTemplateFromFile 和evaluate 模板，而不是使用createHtmlOutputFromFile。添加侧边栏的代码应如下所示：

function showSidebar() {
  var template = HtmlService.createTemplateFromFile('Sidebar');
  var ui = template.evaluate().setTitle('Translate');
  SpreadsheetApp.getUi().showSidebar(ui);
}

【讨论】：

谢谢！它现在有效，但老实说，我不知道为什么 - 使用 createHtmlOutputFromFile 的变体取自官方谷歌应用程序 sript 示例。
<?= ... ?> 是一个需要执行的脚本。加载模板化 HTML 的方法与提供基本 HTML 不同。更多关于模板的信息可以在这里找到：developers.google.com/apps-script/guides/html/templates

【解决方案2】：

我已将 showSidebar() 更改为：

function showSidebar() {
var ui = HtmlService.createTemplateFromFile('Sidebar').evaluate()
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setTitle('Translate');
SpreadsheetApp.getUi().showSidebar(ui);
}

这不仅正确，而且由于使用了“IFRAME”而更快

【讨论】：

【解决方案3】：

在我的 Sidebar.html 中，我尝试包含 css： <?!=include('Sidebar.css.html'); ?>

我做了同样的事情，但没有包括.html。另外，我确保我的代码中文件名的大小写与实际文件名的大小写匹配。在您遵循的 Google 示例中，出于某种原因，他们在代码中将 CSS 文件大写，但它必须与实际文件名匹配。

【讨论】：

【解决方案4】：

您是否声明了 HtmlService 变量是什么？

【讨论】：

不，我不认为我必须 - HtmlService 是一个类，我调用它的静态方法。
HtmlService 是一个 GAS 全局对象。