flasksassflask-assets

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


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 ?


Solution

  • Here is how I got it to work.

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

    enter image description here

    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:

    enter image description here

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

    enter image description here

    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.