Setup Flask to use *.scss - with Flask-Assets and PyScss

1.6k views Asked by At

I can't get Flask to work with scss. I looked into this Using sass with Flask and jinja2 and Set up Flask with webassets. But I am currently stuck. I setup everything and when running the server with flask run the server starts without errors. When I go to localhost:5000 I get this error:

This page isn’t working localhost didn’t send any data. ERR_EMPTY_RESPONSE

But the logs of the server are empty and no *.css file got generated. All thats in the console:

* Serving Flask app "app"
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

This is my structure:

── app
   ├── __init__.py
   ├── assets
   │   └── scss
   │       ├── nav.scss
   │       └── partials
   │           └── color.scss
   ├── config.py
   ├── static
   ├── templates
   │   └── layout.html
   └── views.py

__init__.py

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_assets import Environment, Bundle

app = Flask(__name__)
app.config.from_object('app.config')
db = SQLAlchemy(app)

assets = Environment(app)
assets.url = app.static_url_path

scss = Bundle(
    "assets/scss/nav.scss",
    filters="pyscss",
    output="all.css",
    depends="assets/scss/partials/*.scss"
)

assets.register("style", scss)

from app import views

layout.html

<!DOCTYPE html>
<html>
    <head>
        {% assets "style" %}
        <link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css" />
        {% endassets %}
    </head>
    <body>
        Hello World
    </body>
</html>

config.py

DEBUG = True
ASSETS_DEBUG = True
SQLALCHEMY_DATABASE_URI = 'sqlite:////tmp/test.db'
SQLALCHEMY_TRACK_MODIFICATIONS = False

views.py

from flask import render_template
from app import app

@app.route('/')
@app.route('/index')
def index():
    return render_template('layout.html', title="Home")

nav.scss

body{
    background: green;
}

color.scss

$primary-accent-color: rgba(33, 150, 243, 1.0);

requirements.txt

astroid==1.5.3
attrs==17.3.0
autopep8==1.3.3
Babel==2.5.1
click==6.7
Flask==0.12.2
Flask-Assets==0.12
Flask-Babel==0.11.2
Flask-Login==0.4.0
Flask-SQLAlchemy==2.3.2
Flask-WTF==0.14.2
isort==4.2.15
itsdangerous==0.24
Jinja2==2.10
lazy-object-proxy==1.3.1
MarkupSafe==1.0
mccabe==0.6.1
pluggy==0.6.0
py==1.5.2
pycodestyle==2.3.1
pylint==1.7.4
pyScss==1.3.5
pytest==3.3.1
pytz==2017.3
six==1.11.0
SQLAlchemy==1.1.15
webassets==0.12.1
Werkzeug==0.12.2
wrapt==1.10.11
WTForms==2.1
0

There are 0 answers