CSS file as a Lovelace Resource

Configuration Frontend
1

I’ve added /config/www/css/my.css as a resource for Lovelace but I cannot get it to load and make changes to the frontend. What am I doing wrong?

1 Like
2

This is not my area of expertise, but I’ll try to help.

  1. Need a resource.yaml file (or something like it) that points to my.css, with type: css. Note: should use /local instead of /config/www/ 
  - url: /local/css/my.css
    type: css
  1. Need configuration.yaml to point to this resource file
lovelace:
  mode: yaml
  resources: #starting 0.107 resources go here.
    !include resources.yaml

Reboot HA, and afterwards, refresh the browser.

Hope this helps :slight_smile:

1 Like
3

Isn’t this basically what the OP did?

Adding resources straight to configuration.yaml vs. including a resource.yaml to configuration.yaml look the same to me

1 Like
4

did you find any solution?

5

up, same problem

6

Although it is an old topic, I have arrived here, someone else may be able to help you.

This is the solution:

  1. create file at /config/www/my-file.css.
  2. register the resource from the user interface, with the following configuration:
  • URL: /local/my-file.css.
  • Type: Stylesheet

This is enough, restart your Home Assistant to make sure it picks up the changes.

I’ve been going crazy, I’m pretty new to Home Assistant, trying to check that it was loading. Until I realized that these resources only load on pages that use lovelace, for example, in /config/dashboard you will not have it loaded

by reference