web-dev-qa-db-ja.com

Flaskおよびjinja2でsassを使用する

Flaskアプリケーションにsassコンパイラを含めたいと思っています。これを行う一般的に受け入れられている方法はありますか？

pythonflasksassjinja2
42
kasperhj

Flask-Assets 拡張子（ webassets ライブラリを使用）を使用できます。 SCSSに pyScss コンパイラ（Pythonで実装）を使用するように構成する方法は次のとおりです。

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)

そしてテンプレートにこれを含めます：

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

SCSSファイルもデバッグモードでコンパイルされます。

pyScssはSCSS構文のみをサポートしますが、元のRuby実装を使用する他のフィルター（sass、scssおよびcompass）があります。

56
Audrius Kažukauskas

2013年に質問が回答されてから、いくつかの点が変更されました。

Pyscssと同時にscssをインストールすることはできず、pyscssフィルターが受け入れられた回答のように機能することを期待できます。

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

次のエラーが発生しました：

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

Scssを削除する必要があります（つまり、pip uninstall scss）とpyscssがインストールされていることを確認してください（つまり、pip install pyscss）。

また、pyscssを機能させるために、いくつかの環境変数を設定する必要があることにも注意してください。

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)

詳細については、pyscssフィルターに関するドキュメントを参照してください： http://webassets.readthedocs.io/en/latest/builtin_filters.html#pyscss

私はそれに一日を無駄にしたので、これが他の誰かに多くの時間を節約してくれることを願っています。

8
shrewmouse

libsass を使用したシンプルな1行のソリューションは、import sassの後に、次のように、dirnameキーワード引数を指定してコンパイル関数を使用するだけです。

sass.compile(dirname=('path/to/sass', 'path/to/css'))

たとえば、出力スタイルを設定するオプションもあります。

sass.compile(dirname=('path/to/sass', 'path/to/css'), output_style='compressed')

シンプル。簡単です。セクシー！

詳細： https://sass.github.io/libsass-python/

2
Jacob Philpott

現在、この問題に対するより良いアプローチ、extion Flask-Scss が存在します。

インストールするだけです：pip install Flask-Scss

そして、アプリケーションを構成した後、Scssオブジェクトをインスタンス化します（おそらくmanage.pyファイルにあります）。

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

app = Flask(__name__)
Scss(app)

デフォルトでは、拡張機能は{app.root_dir}/assets/scssまたは{app.root_dir}/assetsで.scssファイルを検索し、生成された.cssファイルを{default_static_dir}/cssまたは{default_static_dir}に配置します。

2
angeldev