Our Ember 3.28 app has two themes, light & dark, and there's a LESS file at packages/ourapp/app/styles/themes/light.less and packages/ourapp/app/styles/themes/dark.less, respectively.

These get compiled with ember-cli-less to light.css and dark.css based on the outputPaths config in packages/ourapp/ember-cli-build.js:

outputPaths: {
  app: {
    css: {
      'themes/light': '/assets/themes/light.css',
      'themes/dark': '/assets/themes/dark.css',
    },
  },
},

Our app - which is in a monorepo with the main package being packages/ourapp, has some small loader JS in its index.html file which loads either of these based on a setting stored in a cookie.

We're trying to upgrade to Ember 5.8 and deal with the headache of adding EAI 2 and Webpack - something that isn't an easy task, given the sheer size of our app.

When starting the app now, we're warned that outputPaths will be deprecated, and pointed at https://deprecations.emberjs.com/id/ember-cli-output-paths-build-option for a resolution on how to replace it.

While that guide might work fine for a single JS file (and presumably a single CSS file), it doesn't really go into any detail as to how to deal with multiple files with different names and paths from what the defaults might be.

I've been trying various things all day, from forcing ember-cli-less to have its own outputPaths (which didn't work - they get overridden with the app's default), to configuring a webpack less loader (which didn't work, as it doesn't seem to know about styles in the packages/styles package in our monorepo, which our app's main package imports via its package.json file.

Right now, the Ember 3.28 app builds the two master theme files based on styles imported from each of the monorepo packages quite happily... but I just don't see a clear path on how to do this under the new EAI 2 & Webpack ecosystem with no outputPaths config.

Can anyone recommend a way to give a like-for-like replacement for the outputPaths config with multiple LESS files that works with EAI 2 and Webpack 5?