What is Correct Way to Include CSS File?

ERPNext
1

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.

  1. I put my css file in app_name/public/css/my_css.css

  2. 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.

1 Like
2

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)?

3

And don’t forget to run bench build --app appname or just bench build for all apps.

1 Like
4

@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.

1 Like
5

Hey @James_Houx
Just wanted to confirm did you also created build.json file in your custom_app/public folder?
and if yes what was the format?

6

You can do it this way:

{
    "css/custom_theme.min.css": [
        "public/css/custom_theme.css"
    ],
    "css/custom_theme_web.min.css": [
        "public/css/custom_theme_web.css"
    ],
    "css/icons.min.css": [
        "public/css/icons.css"
    ]
}

Then put the path of the .min.css file in the hooks.py.

7

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"
8

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.

9

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?

10

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.

11

How can I add css only on Login page?
I need you help

@peterg @rahy @Harsh_Magiya @James_Houx

Thanks and Regards
Shubham