Как правильно настроить Flask + pypugjs + sass?

Я разрабатываю какое-то приложение с Flask, и теперь я решил упростить весь процесс с помощью pypugjs (это python port of jade template engine для JS) и SASS. Установить и использовать pypugjs легко и плавно, но сейчас я не знаю, как правильно использовать его с SASS.

Я читал эту тему, она предоставляет решение Flask + SASS через Flask-Assets и pyscss. И это работает без pypugjsдовольно хорошо, но с pypugjs Я не могу использовать {% assets %} тег.
Поэтому я просто решил позвонить 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 для меня.

Затем я попытался создать собственный фильтр для pypugjs, используя libsass (потому что это самое свежее и живое репозиторий на github со страницы https://github.com/sass/libsass-python). Это работает, если я использую его как встроенную вставку:

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

И pypugjs даже имеет возможность импортировать файлы через фильтры, такие какinclude:my_filter filepathКолба предотвращает такие включения статических файлов. Конструкции как 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 с SassMiddleware. Он работает, но работает только для отдельных файлов, он не объединяет все мои файлы scss в один, несмотря на это 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!

Структура Dir:

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 создаются автоматически.

Итак, есть ли способ автоматически скомпилировать все файлы scss из каталога sass в один файл css? Или я делаю все неправильно и хочу странных вещей, и вместо этого я должен использовать '@import'?

PS: нет pypugjs тег, и у меня нет репутации, чтобы создать его, поэтому я буду использовать старое имя проекта - pyjade в списке тегов.

0 ответов

Другие вопросы по тегам