How to correctly add a custom less file in sage?

I added a custom .less file to assets/layouts with an @import statement in styles/main.less. This worked but had the unintended side effect that my front-end styles got imported by editor-style.less and did very strange things to the TinyMCE editor.

So what is the ‘sage way’ to add a .less file which is specific to the theme I am developing and not have it imported into the editor styles?

As far as I can tell the documentatIon - https://roots.io/sage/docs/theme-development/ - does not cover this.

Am I meant to put them in manifest.json e.g.:

"main.css": {
  "files": [
    "styles/main.less",
    "styles/layouts/landing-page.less"
  ],

One approach is to remove @import "main"; in editor-style.less (perhaps replace it with a subset of your other less files).

No, import them like normal. Nothing is different from your normal workflow expect that any CSS files (literal .css files) will be prepended in your main.css.