Not getting custom.css with Docker

codac

I’m successfully running bastilimbach’ docker image of magicmirror.
The config is running, the modules are running.

What I cannot achieve to get running is the custom.css file.

I have tried several mounting options:
Folder:

-v /volume1/docker/magicmirror/css:/opt/magic_mirror/css \

File:

-v /volume1/docker/magicmirror/css/custom.css:/opt/magic_mirror/css/custom.css \

Folder to File:

-v /volume1/docker/magicmirror/css:/opt/magic_mirror/css/custom.css \

In all cases the custom.css file wont get used by MagicMirror.
In the Dev-Tools I get the following errors:

Refused to apply style from 'http://192.168.0.23:8036/css/custom.css/' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.               192.168.0.23/:1

and

Error on loading stylesheet: css/custom.css               loader.js:215

If I call the URL http://192.168.0.23:8036/css/main.css, i can see the content of the main.css. If I call the URL http://192.168.0.23:8036/css/custom.css I get an error “Cannot GET /css/custom.css/”

In the /opt/magic_mirror/css/ folder I have the main.css and the custom.css file stored.

The code of my custom.css is:

/*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT. *
 *****************************************************/

body {
 margin: 10px;
 height: calc(100% - 10px);
 width: calc(100% - 10px);
}

@font-face {
  font-family: SFPro;
  font-style: normal;
  font-weight: normal;
  font-size: 50%;
  letter-spacing: -2px;
  src:
    url("apple_font.woff2") format("woff2"),
    url("apple_font.woff") format("woff");
}

.MMM-Fuel {
    font-family: SFPro;
}

.MMM-Fuel .sortBy {
    margin-left: 0px;
}

.MMM-Fuel .table {
    border-spacing: 0px 0;
}

.MMM-Fuel .centered {
    padding-right: 10px;
    padding-left: 10px;
}

.MMM-Traffic {
    font-family: SFPro;
    line-height: 0;
}

.MMM-Tankerkoenig {
    font-family: SFPro;
}

.MMM-Formula1 {
    font-family: SFPro;
}

.MMM-google-route {
    font-family: SFPro;
    font-size: 100%;
    max-width: 325px;
    line-height: 0;
}

.MMM-google-route table td.small {
    font-size: 100%;
}

.MMM-google-route #title {
    line-height: 1.5em;
}

.MMM-RTSPStream .innerWrapper {
    border: 0px;
    padding-bottom: 10px;
}

.MMM-RMV {
    font-family: SFPro;
}

.MMM-COVID19-AMPEL {
    font-family: SFPro;
}

.MMM-DWD-WarnWeather {
    font-family: SFPro;
}

.MMM-DWD-WarnWeather .warning {
    float: right;
}

.MMM-DWD-WarnWeather .status {
    text-align: right;
}

.MMM-WiFiPassword {
    font-family: SFPro;
    float: right;
    text-align: right;
}

.calendar {
    font-family: SFPro;
    max-width: 475px;
}

.calendar .normal {
    text-align: left;
}

.MMM-soccer .table {
    font-family: SFPro;
    font-size: 64%;
    font-weight: 100;
}

.MMM-soccer .name{
    color: #999;
    font-weight: lighter;
}

.MMM-soccer .centered{
    color: #999;
}

.MMM-soccer .centered {
    color: #fff;
}

.MMM-soccer .icon {
    width: 16px;
    height: 16px;
}

.alert {
    font-family: SFPro;
    max-width: 325px;
}

.clock {
    font-family: SFPro;

}

.compliments {
    font-family: SFPro;
}

.compliments .xlarge {
    font-size: 50px;
    letter-spacing: 0px;
}

.currentweather {
    font-family: SFPro;
}

.newsfeed {
    font-family: SFPro;
}

.updatenotification {
    font-family: SFPro;
    max-width: 325px;
}

.weather {
    font-family: SFPro;
}

.weatherforecast {
    font-family: SFPro;
    display: table;
    margin-left: auto; 
    margin-right: 0;
}

Any idea how to fix this?
@bastilimbach

sdetweil

@codac I’m gonna throw a wild guess…

1 check the permissions on the custom.css as compared to main.css

ls -laF in the folder where they are

there are 3 bits each for user, same group as user, and all others

Write, Read, and eXecute
777 is everything for all
600 is read/write for user and nothing for anybody else.

and last crazy guess, is there an accidental space in the name?