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

Question

Я хотел бы включить компилятор sass в мое приложение Flask. Есть ли общепринятый способ сделать это?

Answer 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.

Answer 2

Простое однострочное решение с использованием 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/

Answer 3

Некоторые вещи изменились с тех пор, как на вопрос был дан ответ в 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

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

Answer 4

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

Answer 5

Libsass — хорошее решение для этого.

      # Your __init__.py file

from flask import Flask
from sassutils.wsgi import SassMiddleware

app = Flask(__name__)

app.wsgi_app = SassMiddleware(app.wsgi_app, {
    'myapp': ('static/sass', 'static/css', '/static/css')
})

      # Your HTML (Jinja) file

<link href="{{ url_for('static', filename='css/style.scss.css') }}"
      rel="stylesheet" type="text/css">

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