将 sass 与 Flask 和 jinja2 一起使用

Posted 2023-02-23

【中文标题】将 sass 与 Flask 和 jinja2 一起使用

【英文标题】：Using sass with Flask and jinja2

【发布时间】：2013-01-02 23:24:21

【问题描述】：

我想在我的 Flask 应用程序中包含一个 sass 编译器。有没有普遍接受的方法？

【参考方案1】：

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

【参考方案2】：

使用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。

【参考方案3】：

目前，存在一个更好的方法来解决这个问题，扩展 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 中。

【讨论】：

from flask.ext.scss 导入不再起作用。相反，我需要使用from flask_scss import Scss。 （在Flask-Scss docs 中，有一个弃用警告，但不清楚它指的是这种新的导入方法。）

这还能用吗？我正在考虑使用 [github.com/material-components/material-components-web]，但无法让它生成我的 css 和 js。

【参考方案4】：

自 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

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

【参考方案5】：

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 实现。

【讨论】：

啊，我误解了你之前的问题。 webassets 保存编译结果并缓存它们以防止不必要的重新编译，除非对源文件进行了更改。在调试模式下，过滤器通常被完全禁用以不干扰开发（调试缩小的 JS 代码会很痛苦）。 CSS 编译器过滤器是这条规则的例外，因为通常您总是想要它们的结果（CSS 文件）。

对于任何找到此答案的人：这假设您的 scss 文件存在于静态/相对于您的根路径。如果您想要它们在其他地方，例如 assets/，请添加这些行 assets.url = app.static_url_path; assets.directory = app.static_folder; assets.append_path('assets')。路径是相对于根路径的；不要在前面加上/。见github.com/miracle2k/flask-assets/issues/…

不幸的是，它似乎不喜欢@import 声明。如果您修改 @imported 的文件，它不会重新编译 SCSS；仅当它是主文件（在捆绑包中列出）。

@bfontaine 我找到了解决方法，您可以在创建包时使用依赖参数来监视其他一些文件。见webassets.readthedocs.org/en/latest/bundles.html

我刚刚尝试在我的GAE项目中使用这种方法，似乎不可能，因为GAE不允许在运行时创建文件。