如何在Apps Script中无需部署Web App，用include关联CSS与HTML？

问题原因 #

1. CSS文件未用<style>标签包裹：你的css.html仅包含纯CSS代码，缺少<style>标签，导致通过include插入后被浏览器识别为普通文本直接渲染。
2. 未使用模板解析逻辑：当前openForm函数用createHtmlOutputFromFile创建输出，无法解析HTML中的<?!= include('css'); ?>模板指令，导致函数返回的CSS代码直接以文本形式显示。
3. 冗余的<base>标签：HTML头部重复添加了<base />，可能引发不必要的渲染异常。

修复步骤 #

1. 修改css.html，添加<style>标签 #

将CSS代码包裹在<style>标签内，确保浏览器识别为样式代码：

<style>
body {
    font-family: Arial, sans-serif;
    background-color: #1a237e;
}
</style>

2. 更新onOpen.gs中的openForm函数 #

使用模板创建方法并调用evaluate()，解析HTML中的模板指令：

function openForm() {
  var html = HtmlService.createTemplateFromFile('Formulaire')
    .evaluate()
    .setWidth(1500)
    .setHeight(1000);
  SpreadsheetApp.getUi().showModalDialog(html, 'Saisissez les informations nécessaires');
}

3. 清理Formulaire.html中的冗余标签 #

移除重复的<base />标签，仅保留<base target="_top">：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="UTF-8">
    <?!= include('css'); ?>
  </head>
  <body>
    <!-- MEANS -->
    <div class="category">
      <label for="inputMeans" class="ds-formcontrol-label">Means</label>
      <div style="width:100%;">
        <ul class="display-list" id="displayMeans"></ul>
        <input type="text" class="ds-input" id="inputMeans" list="datalistMeans" placeholder="Select here">
        <datalist id="datalistMeans"></datalist>
      </div>
    </div>
  </body>
</html>

验证效果 #

重新运行菜单栏中的"Compléter"选项，模态框将正确应用CSS样式，顶部的文本片段问题消失。

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