Nunjucks macro's not found if in nested folders

Question

I have the following structure:

templates
- base.njk

pages
- index.njk

components //my macro's
button
- button.njk
- button.scss

So when I do an import of my macro in my page: {% import 'button/button.njk' as btn %}
This doesnt work, it loads the button because it doesnt say it can't find the template but when I try to call my macro: {{ btn() }}
It throws an error saying:

Unable to call "btn", which is not a function

but when its not in the 'button' folder it works.

I just want to know if there's a way of maintaining this structure and get this to work?

Thanks

Answer 1

Try

{{ btn.your-macros-name() }}

or

{% from 'button/button.njk' import your-macros-name as btn %}
{{ btn() }}

Answer 2

you should wirte your code like this you can import this in any .njk or .html file except button.njk

{% import "button.njk" as btn %}