What is the correct way include a css file in an app?
I created a custom app. I installed it to the site and its definitely loaded because it shows in the About Dialog.
I put my css file in app_name/public/css/my_css.css
I added it to the corresponding css line in hooks.py:
app_include_css = “/assets/app_name/css/my_css.css”
When I reload the erpnext desk and look at the source code, I don’t see any indication that my_css.css is actually loading anywhere.
Am I missing something?
I looked at the Asset Bundling stuff in the Frappe Documentation. That stuff seems more complicated. I tried it anyway and I couldn’t get it to work either.
If you’re not seeing any indication of the CSS file (nor even a 404 message in your console’s network tab), it’s likely a caching issue. Is your server setup for development (
bench start) or production (nginx reverse proxy and supervisor)?
And don’t forget to run
bench build --app appname or just
bench build for all apps.
@rahy Thank you!
I wasn’t aware of the importance of using bench build to target specific app. I think this fixed my problem. The CSS file shows up in the Desk page source now.
Just wanted to confirm did you also created build.json file in your custom_app/public folder?
and if yes what was the format?
You can do it this way:
Then put the path of the
.min.css file in the hooks.py.
hey so what does the .min.css do
Like how I have my hooks is I have added the files name directly like this
# include js, css files in header of desk.html
app_include_css = "/assets/customapp/css/custom.csscss"
# app_include_js = "/assets/customapp/js/customapp.js"
# include js, css files in header of web template
web_include_css = "/assets/customapp/css/login.css"
The min.css is the minified version of the css files.
What you do is calling each of the css files directly.
By using the min.css you can call only 1 file in the hooks.
But you have to add build.json file in the doctype folder and add all css in that build.
So you mean I should add the css file as min.css
and then add the same names in build.json
Instead of directly adding the file in custom_app/public/css folder?
That is options. You dont have to do it.
In your first post you asked about build file and the content format, hence my answer.