4

I am developing some application with Flask and now I've decided to make the whole process easier with use of pypugjs (it is python port of jade template engine for JS) and SASS. Installing and using pypugjs is easy and smooth, but now I do not know how use it with SASS properly.

I've read this topic, it provides solution to Flask + SASS via Flask-Assets and pyscss. And it works without pypugjs pretty well, but with pypugjs I am unable to use {% assets %} tag.
So I simply decided to call assets.build() in Flask part. But it looks like some sort of transrectal solution:

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')

I tried to setup Flask-Scss (it also use pyscss for SASS compilation) as a middleware. But the project looks pretty dead (last commit was in 2015), and I failed to make it automatically compile SASS files for me.

Then I tried to create custom filter for pypugjs using libsass (because it freshest and most alive github repo from https://github.com/sass/libsass-python page). It works if I am using it as an inline paste:

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

And pypugjs even have an ability to import files via filters like include:my_filter filepath, but flask prevents such includes of static files. Constructions like link(rel='stylesheet', href='static/bar.css'):filter also do not work.

I've tried to use libsass as a separate function in backend:

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')

But it no less transrectal than Flask-Assets approach above, and even more -- it does not merge multiple files into one.

And the last thing I've tried was libsass with SassMiddleware. It works, but it works for single files only, it does not merge all my scss files into one, despite that site-packages/sassutils/builder.py has build_directory() and build() functions, it uses only build_one().

I'll provide detailed example below, as a most relevant one.

Flask part:

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 part:

!!! 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 structure:

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

Files in css directory are created automatically.

So, is there a way to autocompile all scss files in sass directory into one css file? Or I am doing all wrong and wanting strange things and I should use '@import' instead?

PS: There is no pypugjs tag, and I lack of reputation to create one, so I'll use old project name -- pyjade in tag list.

Maurice Meyer
  • 17,279
  • 4
  • 30
  • 47
banderlog013
  • 2,207
  • 24
  • 33

0 Answers0