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.