Использование sass with Flask и jinja2

Ответ 1

Flask-Assets расширение (в котором используется webassets библиотека). Здесь, как настроить его для использования pyScss компилятор (реализованный в Python) для 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)

И в шаблон включите это:

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

Файлы SCSS будут также скомпилированы в режиме отладки.

pyScss поддерживает только синтаксис SCSS, но есть и другие фильтры (sass, scss и compass), которые используют оригинальную реализацию Ruby.

Ответ 2

Некоторые вещи изменились с тех пор, как на вопрос был дан ответ в 2013 году.

Вы не можете установить scss одновременно с pyscss и ожидать, что фильтр 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

Я надеюсь, что это сэкономит кому-то еще много времени, потому что я потратил на это целый день.

Ответ 3

В настоящее время существует лучший подход для этой проблемы: 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)

По умолчанию расширение будет искать ваши .scss файлы в {app.root_dir}/assets/scss или {app.root_dir}/assets и поместит сгенерированные файлы .css в {default_static_dir}/css или {default_static_dir}.

Ответ 4

Простое однострочное решение с использованием libsass:

import sass

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

Первым значением в кортеже dirname должен быть путь к каталогу, содержащему один или несколько файлов sass и/или подкаталогов.

Второе значение должно быть желаемым путем для каталога, содержащего файлы CSS. Если каталог css еще не существует, он будет создан. Если он уже существует, он будет перезаписан.

При желании вы также можете установить стиль вывода, например:

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

Просто. Непосредственная. Sexy!

Дополнительная информация: https://sass.github.io/libsass-python/