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
I haven’t checked my issue with css again (the project cancelled or I found another way…I forget )
But actually if you try, it is quite straightforward. Just put each in the right places (css in css, js in js, html in www) and if necessary put the path in hooks.
What is amazingly difficult (but still there is way around) is when you need to overwrite templates
I prefer to use the direct approach (without bundle) although it is stated in Frappe documentations that using the bundle approach will help reducing the size of the files.