Include CSS in HTML with Google app script-CodePudding

Im trying to build a small app with google app script which will work as an inventory with login im working with HTML and CSS but facing difficulty in connecting both

when i try this in browser, nothing is shown

this is my structure

my code.gs is like this

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

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

My html script goes like this

    <!DOCTYPE html>    
    <html>    
     <head>    
       <base target="_top">
       <?!= include('Stylesheet'); ?>
      </head>    
    <body>    
        <h2>Login Page</h2><br>    
        <div >    
        <form id="login" method="get" action="login.php">    
            <label><b>User Name     
            </b>    
            </label>    
            <input type="text" name="Uname" id="Uname" placeholder="Username">    
            <br><br>    
            <label><b>Password     
            </b>    
            </label>    
            <input type="Password" name="Pass" id="Pass" placeholder="Password">    
            <br><br>    
            <input type="button" name="log" id="log" value="Log In Here">       
            <br><br>    
            <input type="checkbox" id="check">    
            <span>Remember me</span>    
            <br><br>    
            Forgot <a href="#">Password</a>    
        </form>     
    </div>    
    </body>    
    </html>

and css goes like this

    <style>

    body  
    {  
        margin: 0;  
        padding: 0;  
        background-color:#6abadeba;  
        font-family: 'Arial';  
    }  
    .login{  
            width: 382px;  
            overflow: hidden;  
            margin: auto;  
            margin: 20 0 0 450px;  
            padding: 80px;  
            background: #23463f;  
            border-radius: 15px ;  
              
    }  
    h2{  
        text-align: center;  
        color: #277582;  
        padding: 20px;  
    }  
    label{  
        color: #08ffd1;  
        font-size: 17px;  
    }  
    #Uname{  
        width: 300px;  
        height: 30px;  
        border: none;  
        border-radius: 3px;  
        padding-left: 8px;  
    }  
    #Pass{  
        width: 300px;  
        height: 30px;  
        border: none;  
        border-radius: 3px;  
        padding-left: 8px;  
          
    }  
    #log{  
        width: 300px;  
        height: 30px;  
        border: none;  
        border-radius: 17px;  
        padding-left: 7px;  
        color: blue;  
      
      
    }  
    span{  
        color: white;  
        font-size: 17px;  
    }  
    a{  
        float: right;  
        background-color: grey;  
    }  
    <style>

what could be going wrong?

I refereed this document from google https://developers.google.com/apps-script/guides/html/best-practices

i changed my code to match this best practice but still having issues

CodePudding user response：

I think that in your Stylesheet, the tag of <style> is not correctly enclosed. In your case, <style>,,,<style>. I think that this is the reason for your current issue. So, please modify your Stylesheet file as follows.

From:

a{  
    float: right;  
    background-color: grey;  
}  
<style>

To:

a{  
    float: right;  
    background-color: grey;  
}  
</style> <!-- Modified -->

Note:

When you modified the Google Apps Script of Web Apps, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful about this.
You can see the detail of this in my report "Redeploying Web Apps without Changing URL of Web Apps for new IDE (Author: me)".