Error on loading .css

bdeelman

Hi,

I use the Docker image of karsten13/magicmirror:latest

Since a week I’ve got these error messages at the Console.

192.168.1.66/:1 Refused to apply style from ‘http://192.168.1.66:4885/css/roboto.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
192.168.1.66/:1 Refused to apply style from ‘http://192.168.1.66:4885/css/font-awesome.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
loader.js:205 Error on loading stylesheet: css/font-awesome.css

Any ideas how to fix this?

KR,
Bert

sdetweil

@bdeelman I think this is a migration problem, @karsten13 have any guesses?

these used to be in the fonts folder, but it was collapsed and are now present in css folder

I see them in the correct folder on my docker instance

custom.css  custom.css.sample  font-awesome.css  main.css  roboto.css

I see the links in the head section of the MM page

<link rel="stylesheet" type="text/css" href="css/roboto.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">

sdetweil

@bdeelman can you look on the docker host

ls magicmirror/mounts/css  -laF

i see this

-rwxrwxrwx  1 1000  1000     0 Jan 16 08:38 custom.css*
-rwxrwxrwx  1 1000  1000   757 Jul  6 02:00 custom.css.sample*
-rwxr-xr-x  1 1000  1000   161 Jul  6 02:00 font-awesome.css*
-rwxrwxrwx  1 1000  1000  3985 Jul  6 02:00 main.css*
-rwxr-xr-x  1 1000  1000 26965 Jul  6 02:00 roboto.css*

karsten13

@bdeelman

show us your setup. How did you start the container? If with the provided setup goto the magicmirror/run dir and show the output of docker compose config and output of cat .env, if with a docker run ... command show the full command.

I suspect you are using an outdated setup which mounts the whole css dir instead only custom.css file, I changed this a few months ago …

sdetweil

@karsten13 said in Error on loading .css:

I suspect you are using an outdated setup which mounts the whole css dir instead only custom.css file, I changed this a few months ago …

I’m sorry, I don’t understand your words here
we should expose the folder for users that want/need to load other font libraries

this is my docker compose config output

magicmirror:
    container_name: mm
    environment:
      HOST_HOSTNAME: ds-data
      MM_CUSTOMCSS_FILE: css/custom.css
      MM_MODULES_DIR: modules
      MM_OVERRIDE_CSS: "true"
      MM_OVERRIDE_DEFAULT_MODULES: "true"
      MM_SCENARIO: server
      MM_SHOW_CURSOR: "false"
    image: karsten13/magicmirror:latest
    networks:
      default: null
    ports:
      - mode: ingress
        target: 8080
        published: "8080"
        protocol: tcp
      - mode: ingress
        target: 9000
        published: "9000"
        protocol: tcp
    restart: unless-stopped
    volumes:
      - type: bind
        source: /var/services/homes/sam/magicmirror/mounts/config
        target: /opt/magic_mirror/config
        bind:
          create_host_path: true
      - type: bind
        source: /var/services/homes/sam/magicmirror/mounts/modules
        target: /opt/magic_mirror/modules
        bind:
          create_host_path: true
      - type: bind
        source: /var/services/homes/sam/magicmirror/mounts/css
        target: /opt/magic_mirror/css
        bind:
          create_host_path: true

karsten13

@sdetweil

I changed the setup for css to

      - type: bind
        source: /var/services/homes/sam/magicmirror/mounts/css/custom.css
        target: /opt/magic_mirror/css/custom.css
        bind:
          create_host_path: true

It was a design mistake in the beginning to mount the whole folder instead the single file.

This is maybe not backward compatibel for all old setups.

bdeelman

Hi,

Thanks for your reply.

I use portainer and Watchtower to automatic upgrade the Docker image. This is the stack I use:

version: '3'

services:
  magicmirror:
    container_name: magicmirror-1
    image: karsten13/magicmirror:latest
    cap_add:
      - NET_ADMIN
      - NET_RAW
    network_mode: deellan 
    ports:
      - "4885:8080"
    volumes:
      - /volume2/docker/magicmirror-1/config:/opt/magic_mirror/config
      - /volume2/docker/magicmirror-1/modules:/opt/magic_mirror/modules
      - /volume2/docker/magicmirror-1/css:/opt/magic_mirror/css
    restart: unless-stopped
    command: 
      - npm
      - run
      - server

karsten13

@bdeelman said in Error on loading .css:

/volume2/docker/magicmirror-1/css:/opt/magic_mirror/css

then try it with changing the above line to

- /volume2/docker/magicmirror-1/css/custom.css:/opt/magic_mirror/css/custom.css

bdeelman

@karsten13

That did the trick! Thanks.

KR,
Bert