CSS not bundled in Meteor App

[thijssmudde]

Mup version (1.4.5):

The css files I have in my project (located in /client/ such as main.scss or elevation.css) are not bundled to my production app. It works on my local device and even with the --production tag, but not when deploying to a droplet with Meteor up.

I find this very strange, and I have no indication of why the scss/css files are not working.

Relevant Meteor packages used:

fourseven:scss
standard-minifier-css@1.4.1
Meteor Release: METEOR@1.7.0.3

Edit:

Also CSS files do not work
Putting the CSS files in /client/… does not work either. It works however to set the files in /public and then to refer to it, but this is an unjust workaround, since it does not work for packages that I installed (Toastr chrismbeckett:toastr)

Mup config

{
  "servers": {
    "one": {
      "host": "1.2.3.4",
      "username": "root",
      "password": "password"
    }
  },
  "app": {
    "name": "my-app",
    "path": "../reactmyroutes",
    "servers": {
      "one": {}
    },
    "buildOptions": {
      "serverOnly": true
    },
    "env": {
      "ROOT_URL": "https://host.com",
      "MONGO_URL": "mongodb://mongodb:27017/my-app",
      "MONGO_OPLOG_URL": "mongodb://mongodb/local"
    },
    "ssl": {
      "autogenerate": {
        "email": "contact@myroutes.io",
        "domains": "premiumreact.com,www.premiumreact.com"
      }
    },
    "docker": {
      "image": "abernix/meteord:node-8.4.0-base",
      "stopAppDuringPrepareBundle": true,
      "args": [
        "--link=mongodb:mongodb"
      ]
    },
    "enableUploadProgressBar": true,
    "type": "meteor"
  },
  "mongo": {
    "version": "3.4.1",
    "servers": {
      "one": {}
    }
  }
}

[zodern]

To clarify, is the css file successfully loading but empty?

First, please check that the bundle created by meteor build includes the css:

1. Run mup meteor build --cached-build. It will show the location of the bundle.
2. Open <path shown in step 1>/bundle/programs/web.browser and check if there is a css file, and that it contains the missing css.

[thijssmudde]

Yes the css is in the file, unfortunately it was not compiled correctly. There was invalid scss in the website. So it was bundled in the app , but the invalid css just didn't work. But that makes me wonder why it worked locally.

Thanks @zodern

[thijssmudde]

This was the invalid generated css

.leaflet-control-attribution {
  pointer-events: none !important a;
  pointer-events-font-size: 11px;
  pointer-events-pointer-events: none;
}

the origin (not there are no ;):

.leaflet-control-attribution {
  pointer-events: none !important
  a {
    font-size: 11px;
    pointer-events: none
  }
}