pythonflaskbowerflask-assets

Installing bower components with Flask-assets

enter image description here

I'm working to modify a cookiecutter Flask app. I'm currently trying to add a datepicker to a page. I've found https://eonasdan.github.io/bootstrap-datetimepicker/. This cookiecutter uses flask-assets to manage the project assets.

In this app there is an assets.py file that contains:

from flask_assets import Bundle, Environment

# skinning go to https://bootswatch.com/ add to libs/bootstrap/dist/css/

css = Bundle(
    "libs/bootstrap/dist/css/spacelab/bootstrap.css",
    "css/style.css",
    "css/home.css",
    # "css/style.css",
    filters="cssmin",
    output="public/css/common.css"
)

js = Bundle(
    "libs/jQuery/dist/jquery.js",
    "libs/bootstrap/dist/js/bootstrap.js",
    "js/plugins.js",
    filters='jsmin',
    output="public/js/common.js"
)

assets = Environment()

assets.register("js_all", js)
assets.register("css_all", css)

I've found an article , https://adambard.com/blog/fresh-flask-setup/ , which discusses using bower and flask-assets but from the examples given, I'm not sure how to structure the 'css' and 'js' variables , because bower components include both css, and js components, eg:

enter image description here

and I also have a preexisting static folder which I need. Do I need to add the path of each components js, css, sass, less, or is there an easier way?

Solution

  • Every component in Bower has a different arrangement of files; you'll just have to find the resources you need to include and include them in your bundle individually.

    You shouldn't need to include css, sass, and less files; just the built css files should do. In the screenshot you included I would guess that the build folder contains the .js and .css files you want.