How can I make Flask-Assets regenerate SCSS every request when debug mode is enabled?

1.3k Views Asked by At

Here is how I set up flask-assets for scss:

def configure_extensions(app):
  # Web Assets
  from app.extensions import assets
  scss = Bundle(
    'scss/all.scss',
    filters='scss',
    output='scss_all.css'
  )
  assets.register('scss_all', scss)
  assets.init_app(app)

In my config, I set ASSETS_DEBUG = True

This works, and generates the file app/static/scss_all.scss and the folder app/static/.webassets.cache. The styles appear on the site as intended.

The problem, though, is if I want to regenerate the scss style sheet, I must delete the files mentioned above. This is tedious when playing around with scss.

Is there a way to regenerate these files automatically with the reloader when app.debug is set to True?


(aside: I'm using the dev version of flask)

2

There are 2 best solutions below

0
On

The answer by Joe should be accepted. I also implemented it in a similar way:

scss = Bundle('css/main.scss',
             filters='libsass',
             depends='css/*',
             output='gen/home%(version)s.css')

app = Flask(__name__)
assets = Environment(app)
assets.register('scss_all', scss)

all scss files are in the css directory. The main.scss imports the others. Now any change to any file in that directory will force a refresh.

0
On

This should ideally work. But incase you are using @imports to import other scss files within the main file then you need to add the depends option. Something like;

mycss = Bundle(
    'app.scss',
    filters='pyscss,cssprefixer', depends=('/path/to/scss/files/**/*.scss'), output='generated/css/app.css')
assets.register('mycss)