GASでCSSを使用する #初心者

概要

gasでWebアプリ開発をする際にCSS（外部ファイル）が適用されず少し悩んだところがあったので忘れないためにメモをしておく
（2022/07/29現在の内容です）

CSSを適用する

まず以下のようなファイルを作成します。
ファイル作成の仕方は「＋」ボタンを押してhtmlファイルを選択し名前を入力します。

そして各ファイルに記述を行います。
注意してほしいのはコード.gasの内容
Googleなどで調べると以下のような記述があったりするが動かなかった。
恐らくだがこれは外部サイトにgasのプロジェクトの内容を出力したりする時に使うのではと思われる（違っていたらすみません）

　　return HtmlService.createHtmlOutputFromFile('index');

以下のように記述することで無事CSSが適用できた

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
  //　こっちだとCSSなどの外部ファイルが読み込めない
  // return HtmlService.createHtmlOutputFromFile('index');  
}

あとはそれぞれのファイルを記述していき
※CSSファイルので囲むのに注意

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile("css").getContent(); ?>
  </head>
  <body>
    <p class="text">Hello world</p>
    <?!= HtmlService.createHtmlOutputFromFile("js").getContent(); ?>
  </body>
</html>

css.html

<style>
  .text {
    color: red;
  }
</style>

これでCSSができようされた