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
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
- 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.
Still no answer on this?
Seems amazingly difficult to do basic CSS sheet attachment and style overrides…
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
What is the method to overwrite templates?
@James_Houx Does your
build.json looks similar to this:
And does the
hook.py looks similar to this:
is_frappe_above_v13 = int(frappe_version.split('.')) > 13
app_include_css = ['app.bundle.css'] if is_frappe_above_v13 else [
app_include_js = ['app.bundle.js'] if is_frappe_above_v13 else [
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.