Google App engine can not see my CSS files

问题

Google Appengine I am working on a Google App engine project but i cannot see my css.The code just appears plain. My styles can not be seen on the html page.

My app.yaml file is as shown below:

application: paymentgateway
version: 1
runtime: python
api_version: 1

handlers:

- url: .*
  script: main.py

- url: /css
  static_dir: css

My main.py file is as below:

from google.appengine.ext import webapp
from google.appengine.ext.webapp import util
from google.appengine.ext.webapp import template



class MainHandler(webapp.RequestHandler):
    def get(self):
       self.response.out.write(template.render('account_type.html',''))


def main():
    application = webapp.WSGIApplication([('/', MainHandler)],
                                     debug=True)
    util.run_wsgi_app(application)


if __name__ == '__main__':
    main()

account_type.html is as shown below:

<html>
<head>
<title></title>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="formwrap">
<div id="form">
<fieldset><legend><h3>Select Country and Account Type</h3></legend>
<form action="registration_form.html" method="post">
<div class="row">
<div class="label">Select Country </div><!--end .label-->
<div class="input">
<select name="country" class="detail" >
<option>--select country--</option>
<option>Uganda</option>
<option>Kenya</option>
<option>Tanzania</option>
<option>Rwanda</option>
</select>
</div><!--end .input-->
</div><!--end .row-->

<div class="row">
<div class="label">Account Types</div><!--end .label-->
<div class="input">
<input type="radio" name="account" class=""/>
</div><!--end .input-->
</div><!--end .row-->

<div id="submit">
<input id="submit" type="submit" name="submit" value="NEXT">
</div><!-- end #submit -->
</form>
</fieldset>
</div><!--end #form-->
</div><!--end #formwrap-->
</body>
</html>

i have my css in a css folder.

styles.css is as shown below:

body {
background:#E9E9E9;
}


#formWrap {
  width:720px;
  margin-top:30px;
  margin-left:30px;
  background:#FFF;
  border:1px solid #f1f1f1;
   -moz-border-radius:20px;
   -moz-box-shadow:2px 2px 5px #999;
   -webkit-border-radius:20px;
   -webkit-box-shadow:2px 2px 5px #999;
   padding:16px 10px 40px;

}
 #formWrap #form {
border:0px solid #EEE;
width:720px;


}
#form .row {

border:0;
display:block;
line-height:38px;
overflow:auto;
padding:24px 0px;
width:100%;
}
#form .row .label {
font-size:16px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
width:180px;
text-align:right;
float:left;
padding-right:10px;
margin-right:10px;



 }
 #form.row .input {
float:left;
margin-right:10px;
width:auto;
 }

 .detail{
width:260px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
padding:7px 8px;
margin:0;
display:block;
border-radius: 5px 5px 5px 5px;
  background:#E9E9E9;
border:1px solid #CCC;
}
 .detail:focus{
 background-color:#FFF;
 border: 1px solid #999;
 outline: none;

}

 .message{
width:400px;
max-width:400px;
height:280px;
overflow:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
padding:7px 8px;
line-height:1em;
margin:0;
display:block;

}

#form .row .context {
color:#000;
font-size:16px;
line-height:14px;
font-family:Arial, Helvetica, sans-serif;
margin-left:5px;

 }
 #formWrap #form #submit {
 font-family:Arial, Helvetica, sans-serif;
 margin-top:25px;
 margin-left:120px;
 color:#000;
font-size:16px;
text-shadow:1px 1px 1px #999;
padding:10px;
width:150px;
height:40px;

 }
span.error{
color:#000;
display:block;
font-family:Arial, Helvetica, sans-serif;
background-image:url(file:///C|/wamp/www/ContactForm/images/x.png);
background-repeat:no-repeat;
background-position:left 6px;
padding-left:25px;


}

So, when i run the project with Python Google Appengine, I can not see my styles on the page.

What is the problem?

回答1:

From the docs:

URL handler path patterns are tested in the order they appear in app.yaml

The problem with your app.yaml is that all urls are mapped to the main.py, so your static handler is never reached.

So your app.yaml should look like this:

application: paymentgateway
version: 1
runtime: python
api_version: 1

handlers:

- url: /css
  static_dir: css

- url: .*
  script: main.py

Note that here css static handler is listed before application handler.

回答2:

If you see this problem only when using chrome or safari you might just be facing the same issue I had which is a bug in AppEngine returning null as the content-type for css files. Upgrading to 1.6.2.1 fixed my problem.

来源：https://stackoverflow.com/questions/9390917/google-app-engine-can-not-see-my-css-files

标签

google-app-engine