'Google App Script include css from another file

I'm trying out Google app scripts for the first time and I'm having a nightmare trying to get it to read my Stylesheet. I've read dozens of pages and they all say the same thing, but it just doesn't work.

This is my code.gs :-

return HtmlService.createHtmlOutputFromFile('index');

}


function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
    .getContent();
}

This is my index.html

<!DOCTYPE html>
 <html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    Hello!!!!<br>
    This is a test to see how Google scripts work<br>
  </body>
</html>

This is my Stylesheet

<style>
html{
min-height:100%;
background-color:blue;
}

</style>

If I put the style tags inside the index file, it works fine, but when I try to include it, the include script just gets added to my page. I've tried using createTemplateFromFile as well, but it has the same result. It seems like index.html is ignoring the script identifier <?!

Please could someone tell me what I'm doing wrong as every page I've looked at says to do it this way!!!!!

Thanks

cssgoogle-apps-script


Solution 1:[1]

I assume it could be because your are not calling .evaluate()

return HtmlService.createTemplateFromFile('index').evaluate();

https://developers.google.com/apps-script/guides/html/best-practices#code.gs

Solution 2:[2]

Seems like it's been missed to add evaluate() function.

As per the HTML Service: Templated HTML , one should be using particular scriptlet as per the requirement.

I'd recommend a generalized solution like below:

function include(fileName, params) {
    return render(fileName, params).getContent();
}

function render(path, params) {
    let htmlBody = HtmlService.createTemplateFromFile(path);
    
    // for prop drilling
    htmlBody.allParams = {};
    
    if (params) {
        htmlBody.allParams = params;
        Object.keys(params).forEach(key => {
            htmlBody[key] = params[key];
        });
    }
    return htmlBody.evaluate();
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Maulik Pipaliya Joyy

Related Questions