Website theme and hooks web_include_css conflict?

I created a website (in a custom app) and put the css path in build.json and in hooks. Everything went good.

web_include_css = "assets/css/base_web.min.css"

But then I made a website theme in desk. Put some css in the Theme textbox. Now the css from hooks doesn’t load (I confirm this from the browser console).

When I put

@import "/assets/css/base_web.min.css"

in the Website theme, the base_web.min.css file does load, but the element is still overridden by frappe’s scss.

My understanding is they should be all collected and loaded.

What is the best practice (hierarchy) of using css (and js?):

  • frappe scss
  • theme
  • assets/css/… (via build.json)
  • asset/custom-app/public/css/… (direct from custom app public css)
  • other source of css

My goal is to make a base theme in css file (hooked with web_include_css) so user can’t change it.
And let user change some element configurable (like brand color) from the Website Theme.
Thank you