Using "depends" in webassets bundles

Question

I'm using webassets in my Flask application using Flask-Assets and I'm having trouble with the depends option when creating bundles.

In my case I'm bundling LESS files from the following directory structure:

/static
 \_ /css
     \_ /bootstrap
     |   \_ bootstrap.less // This file @imports variables.less and custom.less
     |   \_ variables.less
     \_ custom.less

My bundle looks like this:

css = Bundle(
    "css/bootstrap/bootstrap.less",
    filters="less, cssmin",
    output="dist/base.css",
    depends="**/*.less"
)

With these settings, the LESS files are rebuilt whenever a change is made to either bootstrap.less or custom.less but NOT variables.less.

From what I understand, the expression used for the depends option is a glob instruction and using the one above should simply go through all directories recursively and pick up any LESS files. However, it never seems to pick up on any changes made to variables.less.

In my attempts to fix this, I've tried the following options for depends:

• "*.less" - Doesn't pick up anything (as it's searching in the root of the project directory, I believe, where there are no LESS files anyway)
• "**/*.less, myproject/static/css/bootstrap/variables.less" - Doesn't pick up on any changes in any file at all.
• "**/*.less, myproject/static/css/bootstrap/variables.less" - Same as the one above.
• "myproject/static/css/bootstrap/variables.less" - Strangely enough, this picks up on changes made to both variables.less AND any other LESS files (such as custom.less).

In essence, the last item is the "solution" for my problem but I have no idea why it works the way it does, so it doesn't sit well with me. Can anyone provide an explanation or a nudge in the right direction here?

Thanks!

Answer 1

The problem here is that recursive glob ** is not supported in glob module (yet; see issue 13968).

Here's how I have set this up in one of my projects (not sure if that would suit your needs):

less/
├── bootstrap/
│   ├── bootstrap.less
│   ├── variables.less
│   └── ...
└── style.less        # @import "bootstrap/bootstrap.less";

Bundle configuration:

css = Bundle(
    "less/style.less",
    filters="less, cssmin",
    output="css/all.css",
    depends="less/bootstrap/*.less"
)

Answer 2

I fixed this by installing the glob2 module. My depends='**/*.scss' then started working as I expected, watching for changes in nested directories as well as the top level.