web-dev-qa-db-fra.com

Utiliser sass avec Flask et jinja2

Je voudrais inclure un compilateur sass dans mon application Flask. Y a-t-il une manière généralement acceptée de faire cela?

pythonflasksassjinja2
38
kasperhj

Flask-Assets extension (qui utilise webassets library) peut être utilisé pour cela. Voici comment le configurer pour qu'il utilise pyScss compiler (implémenté en Python) pour SCSS:

from flask import Flask, render_template
from flask.ext.assets import Environment, Bundle

app = Flask(__name__)

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

Et dans le modèle inclure ceci:

{% assets "scss_all" %}
<link rel=stylesheet type=text/css href="{{ ASSET_URL }}">
{% endassets %}

Les fichiers SCSS seront également compilés en mode débogage.

pyScss ne prend en charge que la syntaxe SCSS, mais d'autres filtres (sass, scss et compass) utilisent l'implémentation Ruby d'origine.

52
Audrius Kažukauskas

Certaines choses ont changé depuis la réponse à la question en 2013.

Vous ne pouvez pas installer scss en même temps que pyscss et attendre que le filtre pyscss fonctionne comme dans la réponse acceptée. 

scss = Bundle('foo.scss', 'bar.scss', filters='pyscss', output='all.css')

Je recevais une erreur qui s'est terminée en:

File "/home/sri/crap/example/flask/lib/python2.7/site-packages/webassets/filter/pyscss.py", line 110, in setup
scss.config.STATIC_ROOT = self.static_root or self.ctx.directory

Vous devez supprimer scss (c'est-à-dire pip uninstall scss) et vous assurer que pyscss est installé (c'est-à-dire pip install pyscss).

Notez également que vous devrez définir certaines variables d’environnement pour que pyscss fonctionne également:

app = Flask(__name__)

assets     = Environment(app)
assets.url = app.static_url_path
scss       = Bundle('index.scss', filters='pyscss', output='all.css')


assets.config['SECRET_KEY'] = 'secret!'
assets.config['PYSCSS_LOAD_PATHS'] = assets.load_path
assets.config['PYSCSS_STATIC_URL'] = assets.url
assets.config['PYSCSS_STATIC_ROOT'] = assets.directory
assets.config['PYSCSS_ASSETS_URL'] = assets.url
assets.config['PYSCSS_ASSETS_ROOT'] = assets.directory

assets.register('scss_all', scss)

voir la documentation sur le filtre pyscss pour plus d'informations: http://webassets.readthedocs.io/en/latest/builtin_filters.html#pyscss

J'espère que cela épargnera beaucoup de temps à quelqu'un d'autre, car j'ai perdu toute une journée là-dessus.

5
shrewmouse

Il existe actuellement une meilleure approche pour ce problème, l’extion Flask-Scss .

Il suffit de l'installer: pip install Flask-Scss

Et instanciez un objet Scss après avoir configuré l'application (probablement dans votre fichier manage.py):

from flask import Flask
from flask.ext.scss import Scss

app = Flask(__name__)
Scss(app)

Par défaut, l'extension recherchera vos fichiers .scss dans {app.root_dir}/assets/scss ou {app.root_dir}/assets et placera les fichiers générés .css dans {default_static_dir}/css ou {default_static_dir}.

2
angeldev