SychO I would like to propose a potential solution:
Consider importing styles directly into JavaScript components and configuring Webpack to output a separate CSS file for each component using MiniCssExtractPlugin. After this, on the server side, these individual CSS files could be concatenated together.
Here is an example for better illustration:
import 'DiscussionPage.scss';
export default class DiscussionPage<CustomAttrs extends IDiscussionPageAttrs = IDiscussionPageAttrs> extends Page<CustomAttrs> {
...
}
This approach would result in each component having its own style file, which could be easily overwritten or extended by a Flarum extension. This way, the functionality would remain similar to the current one, with PHP no longer needing to compile styles, but only concatenating them instead.
However, in a development environment, the styles could be loaded separately to preserve the benefits of HMR.
