What is Correct Way to Include CSS File?

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

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.

1 Like

@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

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?

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.

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.