如何从Google Sheets读取配置动态生成Google Apps Script所需CSS样式

核心原因 #

google.script.run 是异步非阻塞接口，调用后不会立即返回服务端函数的执行结果，只会返回undefined，因此原有的字符串拼接逻辑在执行时还没拿到服务端返回的样式值，同时回调函数的返回值无法直接传递到调用google.script.run的上层上下文，所以所有CSS变量都为undefined。

推荐解决方案（批量读取，性能最优） #

第一步：修改服务端代码，一次性返回所有样式配置 #

避免多次发起异步请求，减少性能损耗，同时避免多请求返回顺序混乱的问题。

function getAllStyleConfigs() {
  var ss = SpreadsheetApp.openByUrl(sheetURL);
  // 此处按需求添加所有需要读取的样式命名区域名称
  var styleKeys = ["body.bg.color", "num.text.color", "num.bg.color"];
  var configs = {};
  styleKeys.forEach(function(key) {
    configs[key] = ss.getRangeByName(key).getValue();
  });
  return configs;
}

第二步：修改客户端代码，在异步回调中生成样式 #

所有CSS拼接逻辑全部放到请求成功的回调函数中，确保拿到所有配置值后再生成样式标签插入页面。

$(function() {
  google.script.run
    .withSuccessHandler(function(styleConfigs) {
      var styleStr = "<style>:root {";
      styleStr += `--body-bg-color: ${styleConfigs["body.bg.color"]};`;
      styleStr += `--num-text-color: ${styleConfigs["num.text.color"]};`;
      styleStr += `--num-bg-color: ${styleConfigs["num.bg.color"]};`;
      // 其余CSS变量按上述格式补充
      styleStr += "}</style>";
      $("head").append(styleStr);
    })
    .withFailureHandler(function(err) {
      // 可选：添加错误兜底逻辑，加载失败时使用默认样式
      console.error("样式配置加载失败：" + err);
    })
    .getAllStyleConfigs();
});

可选方案（按单个命名区域读取） #

如果必须保留单个读取的逻辑，可以用Promise封装google.script.run，等待所有请求完成后再拼接样式：

// 封装异步读取为Promise
function getStyleVal(rangeName) {
  return new Promise((resolve, reject) => {
    google.script.run
      .withSuccessHandler(resolve)
      .withFailureHandler(reject)
      .getNamedRangeVal(rangeName);
  });
}

$(function() {
  Promise.all([
    getStyleVal("body.bg.color"),
    getStyleVal("num.text.color"),
    getStyleVal("num.bg.color")
  ]).then(([bgColor, textColor, numBgColor]) => {
    var styleStr = `<style>:root {
      --body-bg-color: ${bgColor};
      --num-text-color: ${textColor};
      --num-bg-color: ${numBgColor};
    }</style>`;
    $("head").append(styleStr);
  }).catch(err => {
    console.error("样式加载失败", err);
  });
});

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