Syntax error when referencing multiple files?

Hi, I have a strange problem:
To keep a clean serverless.yml file, I have split my resources per multiple files. Like this:

resources:
  - ${file(./resources/auth-cognito.yml)}
  - ${file(./resources/api-gateway-errors.yml)}
  - ${file(./resources/database-dynamo.yml)}
  - ${file(./resources/s3-bucket.yml)}
  - ${file(./resources/pubsub-sns.yml)}

This deploys fine, but the serverless IDE VSCode extension underlines the rows and complains with:

Incorrect type. Expected object.

When I remove the dashes and write this:

resources:
  ${file(./resources/auth-cognito.yml)}
  ${file(./resources/api-gateway-errors.yml)}
  ${file(./resources/database-dynamo.yml)}
  ${file(./resources/s3-bucket.yml)}
  ${file(./resources/pubsub-sns.yml)}

…then it does not package anymore and throws this:

Trying to populate non string value into a string for variable ${file(./resources/auth-cognito.yml)}. Please make sure the value of the property is a string.

However, this works:

functions: 
  ${file(./functions/functions.yml)}

So its not really the dashes where the problem is, this problem seems to manifest only when there are multiple files referenced one under another (which should be quite a common scenario?)

It fails in all scenarios, also when I remove the “Resources” in each resource .yml file and put just one “Resources” in the serverless.yml, like this:

resources:
  Resources:
    - ${file(./resources/auth-cognito.yml)}
    - ${file(./resources/api-gateway-errors.yml)}
    - ${file(./resources/database-dynamo.yml)}
    - ${file(./resources/s3-bucket.yml)}
    - ${file(./resources/pubsub-sns.yml)}

Thanks for any suggestion.
Regards,

i am also having an issue with combining the multiple serverless.yml files. Can you tell me the way that worked for you?