Level 59
It concats, minifies, and applies source maps.
That's a pretty weird outcome, if only the font is slightly different. Can you pinpoint the exact selector, where the CSS comes out different?
Jun 7, 2016
3
Level 7
What does mix.styles actually do?
I have a situation where everything works great if I include individual style sheets in my layout file like so:
<link href="/css/spark.css" rel="stylesheet">
<link href="/css/semantic.css" rel="stylesheet">
<link href="/css/ucpics.css" rel="stylesheet">
But if I try to concatenate those three files together using Elixir's mix.styles, everything still works but the font for all headings and buttons looks slightly different and it's driving me nuts. This is what I'm using to concatenate:
mix.styles(['./public/css/spark.css', './public/css/semantic.css', './public/css/ucpics.css'], './public/css/app.css')
Since the actual contents of each individual .css file hasn't changed, it leads me to believe that something else is going on during the concatenation process that is either changing the css or inserting it in a different sequence order. Can anyone explain what could be happening here?
Thanks!
Level 7
Thanks for the help Jeffrey. I was inspecting css code in the browser for hours yesterday trying to figure this out and I wasn't able to come up with any particular css that is causing the change. If I open two browser tabs: 1) with individual css and 2) with concatenated css, then click on an H1 heading that looks different and inspect it in both tabs side by side, the css looks absolutely identical. I can't pinpoint anything that is making the change.
The only thing that I've come up with that looks different is if I open the computed tab in chrome and scroll all the way to the bottom in both browsers, on one under Rendered Fonts it says Lato 30 glyphs and on the other it says Lato 33 glyphs. I have no idea why it would be different for one vs. the other when the text heading is exactly the same.
You can see the differences in the font in my screen shots here: https://laracasts.com/discuss/channels/spark/spark-semantic-ui
Any ideas?
Level 7
I have no idea why, but I was able to fix this by adding the following line to my template file before my css imports:
<link href='https://fonts.googleapis.com/css?family=Lato:700,400' rel='stylesheet' type='text/css'>
That fixed it, but I have no idea why since it was only an issue if I concatenated the css files. Does this mean there's a bug somewhere in Elixir or something that Elixir is using?
Please or to participate in this conversation.