Как правильно настроить Flask + pypugjs + sass? - PullRequest
Новая
       53

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

0 голосов
/ 17 декабря 2018

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

Я прочитал эту тему , она предоставляет решение для Flask + SASS через Flask-Assets и pyscss .И он работает без pypugjs довольно хорошо, но с pypugjs я не могу использовать тег {% assets %}.
Так что я просто решил вызвать assets.build() в части Flask.Но это выглядит как своего рода трансректальное решение: 

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 в списке тегов.

...