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 ?
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.