App Script HTML Service调用CSS文件显示为纯文本问题排查

你的问题核心是模板语法错误加页面渲染方式不对，导致代码被当作纯文本处理，还被浏览器自动移到了body区域。

具体问题点 #

1. 语法写错了：你用的<?!= ... ?>是错误的Google Apps Script模板语法，正确的无转义输出标签应该是<?!= ... ?>（问号在前，感叹号在后）。错误语法不会被解析，直接变成纯文本。
2. 渲染方式错误：如果服务器端用HtmlService.createHtmlOutputFromFile('index')返回页面，index.html会被当作普通HTML文件，完全不处理模板标签。必须用模板渲染方式才能执行这些脚本。

修正步骤 #

1. 修正index.html代码 #

把错误标签改成正确的模板语法：

<head>
  <base target="_top">
  <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>

2. 修正服务器端渲染代码 #

确保doGet函数用模板方式渲染页面：

function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('自定义页面标题');
}

3. 确认css.html格式 #

css.html里直接写带<style>标签的CSS代码即可，比如：

<style>
body {
  margin: 0;
  padding: 20px;
  font-family: Arial, sans-serif;
}
/* 其他CSS样式 */
</style>

为什么会出现在body里？ #

浏览器有HTML容错机制，遇到无法识别的标签或文本（你的错误模板标签就属于这类），会自动把它们移动到body标签内，所以检查工具显示它在body中。

内容的提问来源于stack exchange，提问作者maccollaflower