Noob help: SCSS not working on production?

Ember CLI
1

So everything is working fine locally, when I run ember serve, but when I build to production and post my app, the scss files don’t work. css seems to be there, but not working at all.

See it here: jer1my.com is for sale | HugeDomains

My initial thoughts were that it was a content security issue, but I have the following:
contentSecurityPolicy: {
‘default-src’:“‘self’“,
‘style-src’:”‘self’”,
‘font-src’: “‘self’ data: fonts.gstatic.com”,
//‘style-src’: “‘self’ ‘unsafe-inline’ http://fonts.googleapis.com”
}

I am at a total loss, because I am not getting any errors and if you view the css file at the URL above there appear to be css that’s ignored.

I fear this is one of those just needs a second pair of eyes things, that I am missing something simple because i have been looking at it too long.

Also, I am a totally noob, so be gentle LOL :wink:

2

Also, using ember-cli-sass, and tried adding the files manually in ember-cli-build.js, and that didn’t seem to help, but my sassoptions look like the following if this is helpful:

sassOptions: {  
  inputFiles: [  
    '/app/styles/app.scss',  
    '/app/styles/color.scss',  
    '/app/styles/forms.scss',  
    '/app/styles/icons.scss',  
    '/app/styles/typography.scss'  
  ],  
  includePaths: [  
    'app/styles'  
  ]  
}
3

Check your font-face declaration, it looks like you have an unclosed {} block that when concatenated with the other scss files is preventing them from being applied.

4

Not sure but can you disable the tweedle font?

Parse Error {.global-nav-b7c7b90f{font-family:tweedle;src:url(../../assets/fonts/tweedle.eot);src:url(../../assets/fonts/tweedle.eot?#iefix) format("embedded-opentype"),url(../../assets/fonts/tweedle.woff) format("woff"),url(../../assets/fonts/tweedle.ttf) format("truetype"),url(../../assets/fonts/tweedle.svg#tweedle) format("svg");font-weight:400;font-style:normal}

https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.jer1my.com%2Fember%2Fassets%2Ftweedle-2526b0d4f84bede7cfef9741f1f11253.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=nl

5

The tweedle font is also missing from the assets directory, @jer1my the fonts should be placed in the ember-app/public/assets/fonts directory and change the @font-face rule to load from url('../assets/fonts/tweedle.eot') etc.

6

Thanks so much everyone… I was finally able to get it to work by doing a build without the environment definition, I obviously still have a lot to learn about how that environment.js file functions.

And, as I suspected, I had been looking at it too long yesterday and was missing some simple things as well.

Really appreciate the feedback/help :wink:

7

I sent you a PR with the exact changes but the problem was caused by the combination of production env minification and the import order of the pod-styles.scss file.

The component styles.scss files can use the $variables and @mixins defined in files imported before pod-styles.scss, they should not be imported in each component/styles.scss file.

8

Thanks for the help… It’s really appreciated.

I knew it was something simple I wasn’t catching, since it was running fine until I did the production build. I wish there was better documentation available for ember and ember-cli… As a noob ember developer I am spending a huge amount of time digging through the old interwebs just trying to find the info I need to understand how things work together. I probably would have given up on ember by now if I weren’t too tenacious for my own good LOL ;).

Anyway thanks again for the assistance.