flask - Cant generate all.css file from sass files with flask-assets

Question

I became tired of using css in my flask app so I decided to move to scss with flask assets https://github.com/miracle2k/flask-assets. I added this in my app.py file:

from flask_assets import Environment, Bundle

assets = Environment(app)
assets.debug = True
assets.url = app.static_url_path
scss = Bundle('sass/foo.scss', 'sass/bar.scss', filters='pyscss', output='gen/all.css')
assets.register('scss_all', scss)

If I understand correctly, these lines are supposed to go check my static/sass folder and generate a gen folder with a single all.css minified file right ? I also created a sass folder inside my static assets folder and foo.scss file inside it with some code to test it out. However when I launch the app, nothing is generated and I get no error. What am I doing wrong here ?

Answer 1

Here is how I got it to work.

Here is a screen shot of my project directory before it generates anything:

Next, I made sure I had the following installed:

pip install flask-assets

pip install pyscss (this is your filter in the filters='pyscss' section)

Here is how I have the code setup:

from flask import Flask, render_template
from flask_assets import Environment, Bundle

app = Flask(__name__)

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

scss = Bundle('sass/foo.scss', 'sass/bar.scss', filters='pyscss', output='gen/all.css')
assets.register('scss_all', scss)


@app.route('/')
def hello_world():
    return render_template('index.html')


if __name__ == '__main__':
    app.run()

And the index.html:

{% assets "scss_all" %}
    <link rel="stylesheet" href="/static/gen/all.css">
{% endassets %}
<ul>
    <li>
        Test Flask Assets
    </li>
</ul>

Now, when I ran the application it took a sec for it to generate the css, but it did generate. Once it does, here is the directory structure after running:

And you can see in the chrome debugger that it indeed does load:

It's important to note that the folder has to be gen in the configuration output='gen/all.css' otherwise it won't work.

EDIT Also per @David's comment, it's important that you have all the required scss files created to generate the output.