Question

我正在用Flask开发一些应用程序，现在我决定制作使用pypugjs（JS的jade模板引擎的python端口）和SASS可以简化整个过程。安装和使用pypugjs既简单又顺利，但是现在我不知道如何在SASS中正确使用它。

我已经读过了 topic，它通过以下方式为Flask + SASS提供解决方案 Flask-Assets和 pyscss。它可以在没有pypugjs的情况下工作很好，但是使用pypugjs我无法使用{% assets %}标签。
因此，我只是决定在Flask部分中调用assets.build()。但这看起来像是一种经直肠的解决方案：

from flask import Flask
from flask import render_template
from flask_assets import Environment, Bundle
import pypugjs

app = Flask(__name__)
app.jinja_env.add_extension('pypugjs.ext.jinja.PyPugJSExtension')

assets = Environment(app)
assets.url = app.static_url_path
assets.debug = True

scss = Bundle('sass/foo.scss', filters='pyscss', output='all.css')
assets.register('scss_all', scss)


@app.route('/')
def hello_world():
    assets['scss_all'].build()
    return render_template('flask_hello.pug', test_fl="EMPEROR", test='false')

我尝试设置Flask-Scss（它也使用pyscss进行SASS编译）作为中间件。但是项目看起来快死了（最后一次提交是在2015年），但我未能自动完成为我编译SASS文件。

然后我尝试创建custom filter for pypugjs 使用libsass（因为它是最新的和https://github.com/sass/libsass-python页上最活跃的github回购）。如果我将其用作嵌入式粘贴，它将起作用：

style
    :sass_it
        $primary-color: gold;
        body { background-color: $primary-color;}

而且pypugjs甚至可以通过过滤器（例如 include:my_filter filepath，但flask阻止了此类静态文件的包含。 link(rel='stylesheet', href='static/bar.css'):filter之类的结构也不起作用。

我试图在后端使用libsass作为单独的功能：

from flask import Flask
from flask import render_template
# import pypugjs
import sass


app = Flask(__name__)
app.jinja_env.add_extension('pypugjs.ext.jinja.PyPugJSExtension')


@app.route('/')
def hello_world():
    sass.compile(dirname=('sass', 'css'), output_style='compressed')
    return render_template('flask_hello.pug', test_fl="EMPEROR", test='false')

但它的经直肠直肠功能不亚于上述Flask-Assets方法，甚至更多- 它不会将多个文件合并为一个。

最后我尝试过的是libsass with SassMiddleware。它有效，但仅适用于单个文件，不会合并我所有的scs 尽管site-packages/sassutils/builder.py具有 build_directory()和build()函数，它仅使用build_one()。

我将在下面提供最相关的详细示例。

烧瓶部分：

from flask import Flask
from flask import render_template
from sassutils.wsgi import SassMiddleware

app = Flask(__name__)
app.jinja_env.add_extension('pypugjs.ext.jinja.PyPugJSExtension')
app.wsgi_app = SassMiddleware(app.wsgi_app, {
    'pypugtests': {'sass_path': 'static/sass',
                   'css_path': 'static/css',
                   'strip_extension': True,
                   },
})


@app.route('/')
def hello_world():
    return render_template('flask_hello.pug', test_fl="EMPEROR", test='false')


if __name__ == '__main__':
    app.run()

pypugjs部分：

!!! 5
html(lang="en")
  head
    title= pageTitle
    // scss generated
    link(rel='stylesheet', href='static/css/foo.css')
    link(rel='stylesheet', href='static/css/bar.css')
  body
    h1.title PugJS - node template engine
    #container
      if (test == 'false')
        p You are amazing, #{test_fl}
      else
        p Get on it!

目录结构：

pypugtests/
├── __init__.py
├── pypugtests.py
├── static
│   ├── css
│   │   ├── bar.css
│   │   ├── bar.css.map
│   │   ├── foo.css
│   │   └── foo.css.map
│   └── sass
│       ├── bar.scss
│       └── foo.scss
└── templates
    └── flask_hello.pug

css目录中的文件是自动创建的。

那么，有没有一种方法可以将sass目录中的所有scss文件自动编译为一个css文件？否则我做错了，想要奇怪的事情，应该使用“ @import” 代替？

PS：没有pypugjs标签，并且我缺乏创建它的声誉，因此我将使用旧项目名称-pyjade在标签列表中。

如何正确设置Flask + pypugjs + sass？

0 个答案: