Google Apps Script部署后CSS背景与样式不生效问题排查

以下是几个大概率导致样式失效的原因及解决办法：

1. 检查doGet函数的实现 #

确保你用的是模板解析模式，而非直接输出HTML文件。如果doGet写法错误，模板里的include标签不会被解析：

// 错误写法：直接输出HTML，模板标签不生效
function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

正确写法应为：

// 正确写法：创建模板并解析执行
function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

2. 确认include函数的正确性 #

include函数必须返回文件的纯文本内容，不能直接返回HtmlOutput对象：

// 正确的include实现
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

如果少了.getContent()，返回的是对象，插入页面后会变成无效内容，导致CSS无法生效。

3. 检查Index.html中引入CSS的方式 #

必须用模板语法<?!= ?>将CSS内容直接插入到<style>标签内，不能用<script>或其他标签：

<!-- 正确写法：用模板标签插入CSS内容 -->
<!DOCTYPE html>
<html>
  <head>
    <style>
      <?!= include('Stylesheet'); ?>
    </style>
  </head>
  <body>
    <!-- 页面内容 -->
    <div class="login">登录区域</div>
  </body>
</html>

注意：文件名要和Google Apps Script里的样式表文件名完全一致（大小写敏感，比如Stylesheet和stylesheet是两个不同文件）。

4. 排查CSS选择器的问题 #

• 检查Stylesheet里的选择器是否和页面元素匹配：比如写了.login但页面元素是id="login"，或者类名拼写错误。
• 可临时给样式加!important验证是否被默认样式覆盖（不推荐长期使用，仅作测试）：

/* 临时测试用，确认样式是否能生效 */
body {
  background-color: #f0f0f0 !important;
}

5. 清除浏览器缓存 #

部署后的应用可能被浏览器缓存了旧版本，按Ctrl+F5（Windows）或Cmd+Shift+R（Mac）强制刷新页面，再查看样式是否生效。

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