无法创建.css文件时，如何在Google Apps Script中引入Bootstrap与CSS？

Google Apps Script的Web Apps环境确实不支持创建独立的.css文件或文件夹，但可以通过以下几种方式实现CSS样式的添加：

方法1：内联CSS（最简单，适合少量样式） #

直接在HTML的<head>标签内添加<style>块，把CSS代码写在里面。这是最直接的方式，适合样式不多的场景。

修改你的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      /* 示例样式，可根据需求修改 */
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      form {
        background: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
      }
      input {
        display: block;
        width: 100%;
        margin: 0.5rem 0;
        padding: 0.8rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
      }
      /* fadeIn动画效果 */
      .fadeIn {
        animation: fadeIn 0.5s ease-in-out forwards;
        opacity: 0;
      }
      .fadeIn.second { animation-delay: 0.2s; }
      .fadeIn.third { animation-delay: 0.4s; }
      .fadeIn.fourth { animation-delay: 0.6s; }
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }
    </style>
  </head>
  <body>
    <form>
      <input type="text" id="login" class="fadeIn second" name="login" placeholder="login">
      <input type="text" id="password" class="fadeIn third" name="password" placeholder="password">
      <input type="submit" class="fadeIn fourth" value="Log In">
    </form>
  </body>
</html>

方法2：将CSS存入单独的GS文件（适合样式较多，便于管理） #

创建一个新的.gs文件（比如命名为StyleSheet.gs），在里面定义一个返回CSS字符串的函数：

function getStyles() {
  return `
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    form {
      background: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    input {
      display: block;
      width: 100%;
      margin: 0.5rem 0;
      padding: 0.8rem;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    .fadeIn {
      animation: fadeIn 0.5s ease-in-out forwards;
      opacity: 0;
    }
    .fadeIn.second { animation-delay: 0.2s; }
    .fadeIn.third { animation-delay: 0.4s; }
    .fadeIn.fourth { animation-delay: 0.6s; }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
  `;
}

然后在你的主HTML文件中，通过<?!= getStyles() ?>把CSS插入到<head>里：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style><?!= getStyles() ?></style>
  </head>
  <body>
    <form>
      <input type="text" id="login" class="fadeIn second" name="login" placeholder="login">
      <input type="text" id="password" class="fadeIn third" name="password" placeholder="password">
      <input type="submit" class="fadeIn fourth" value="Log In">
    </form>
  </body>
</html>

方法3：使用独立的HTML文件存储CSS（模拟独立CSS文件的体验） #

创建一个新的HTML文件（比如命名为styles.html），里面只包含<style>标签和CSS内容：

<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  form {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  input {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .fadeIn {
    animation: fadeIn 0.5s ease-in-out forwards;
    opacity: 0;
  }
  .fadeIn.second { animation-delay: 0.2s; }
  .fadeIn.third { animation-delay: 0.4s; }
  .fadeIn.fourth { animation-delay: 0.6s; }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

然后在主HTML文件中，通过HtmlService.createHtmlOutputFromFile()引入这个文件的内容：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('styles.html').getContent() ?>
  </head>
  <body>
    <form>
      <input type="text" id="login" class="fadeIn second" name="login" placeholder="login">
      <input type="text" id="password" class="fadeIn third" name="password" placeholder="password">
      <input type="submit" class="fadeIn fourth" value="Log In">
    </form>
  </body>
</html>

注意事项 #

• 以上方法都需要确保你的Web Apps部署时，使用的是HTML服务（即通过HtmlService.createHtmlOutput()或HtmlService.createTemplateFromFile().evaluate()返回HTML内容）。
• 如果使用模板语法（比如<?!= ... ?>），需要用evaluate()方法处理模板，比如你的doGet函数应该类似：

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

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