python - 将 sass 与 Flask 和 jinja2 一起使用

Question

我想在我的 Flask 应用程序中包含一个 sass 编译器。有没有普遍接受的方式来做到这一点？

Answer 1

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 语法，但还有其他过滤器（sass和scss）compass使用原始 Ruby 实现。

Answer 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

我希望这可以节省其他人很多时间，因为我浪费了一整天的时间。

Answer 3

使用libsass的简单单行解决方案。在您import sass简单地使用带有 dirname 关键字参数的 compile 函数之后，如下所示：

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

您还可以选择设置输出样式，例如：

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

如果您想在每次编辑时查看文件或目录以进行自动编译，请使用boussole。

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)

默认情况下，扩展程序会在 or 中查找您的 .scss 文件，{app.root_dir}/assets/scss并将{app.root_dir}/assets生成的 .css 文件放在{default_static_dir}/cssor中{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