Bottle web app not serving static css files

Question

My bottle web application is not serving my main.css file despite the fact I am using the static_file method.

app.py

from bottle import *
from xml.dom import minidom
@route('/')
def index():
    return template("index")

@route('/glossaryXML')
def glossary():
    doc_def = minidom.parse("table_definitions.xml")
    terms = doc_def.getElementsByTagName("str_term")
    defins = doc_def.getElementsByTagName("str_definition")
    return template("list", terms=terms, defins=defins)

@route('<filename>.css')
def stylesheets(filename):
    return static_file(filename, root='static')

@error(404)
def fourofour(error):
    return "Error"

run(host='localhost', port=8080, debug=True)

The page I am trying to access is the index page, in which index.tpl looks like

<!DOCTYPE HTML>
<html>
    <head>
        <title>ICT Applications Glossary</title>
        <link type="text/css" href="main.css" rel="stylesheet">
    </head>
    <body>
        It works
    </body>
</html>

My CSS file is located in a folder named "static" which is in my root folder

Check my other answer: https://stackoverflow.com/a/45761391/3129414 — arshovon, Aug 18 '17 at 16:48

Paul Rooney · Accepted Answer · 2015-03-31T00:20:26.567

11

Instead specify your static route like this

@route('/<filename:path>')
def send_static(filename):
    return static_file(filename, root='static/')

This will serve any file in your static directory though not just css.

To make it stylesheet specific

@get('/<filename:re:.*\.css>')
def stylesheets(filename):
    return static_file(filename, root='static/')

Note: for the latter option you could put stylesheets in their own directory 'static/css' or just 'css' and keep them separate from other static resources (scripts, images etc.) to do this just specify the root parameter to be that directory e.g. `root='static/css'.

edited Mar 31 '15 at 00:20

answered Mar 30 '15 at 23:58

Paul Rooney

20,879
9
40
61

This does route the CSS but it's still not being applied to my page – user1994100 Mar 31 '15 at 00:01
Sorry I had thought you would reference your style sheet as href="static/main.css" in the html. This is not the case. What is there now should be good. – Paul Rooney Mar 31 '15 at 00:07
When I refer to a page with the url "localhost:8080/category/" the CSS that's being referenced is "category/static/main.css". Is there anyway I can change this to be the absolute path? – user1994100 Mar 31 '15 at 04:40
In your html link tag use an absolute address e.g. `"`. – Paul Rooney Mar 31 '15 at 05:01

score 1 · Answer 2 · answered Mar 31 '15 at 00:05

There are 2 problems that I can see:

The route for the CSS files should begin with a slash, ie.
```
@route('/<filename>.css')
```
Only the matching part of the pattern is passed to stylesheets() in the filename argument, e.g. instead of main.css, it will be main. Change the code to this:
```
@route('/<filename>.css')
def stylesheets(filename):
    return static_file('{}.css'.format(filename), root='static')
```

score 0 · Answer 3 · answered Jul 19 '18 at 13:55

Alternatively... rename your main.css file to main.tpl, bookend with <style> and </style>, move it into the /views directory along with your other templates, then simply add to the beginning of your return line:

return (template ("main"), template ("list", terms=terms, defins=defins))

Bottle web app not serving static css files

3 Answers3

Linked