CODEWITHSUNDEEP
cssmeteor
BenjaminRH
BenjaminRH

Reputation: 12172

Using @import with Meteor

I'm using a css @import at the top of a stylesheet in my Meteor app. MDN on @import says that the at-rule "must precede all other types of rules". In development, this works as expected, getting the font from Google. However in production, Meteor minimizes and concatenates all of the css, leaving my @import halfway down the file. I'm pretty sure that is the cause of this error I get (from the Firefox console):

[14:31:13.713] Unrecognized at-rule or error parsing at-rule '@import'. @ http://mysite.meteor.com/b8c40bfddcd8fb2703b86888363d3590feb986d3.css:17

Just in case it's not the problem I think it is, here's the rule:

@import url("http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic");

Has anybody run across this before and found a solution? Am I missing something obvious?

Upvotes: 1

Views: 3231

Answers (1)

Jérémie Parker
Jérémie Parker

Reputation: 3174

Edit: it is now fixed and merged (see the commit)

Previous answer:

This is a known issue. You may want to try one of the alternative way of loading your font. Either by using another CSS file or by using javascript snippet provided by google :

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Lato:400,700,900,400italic:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 
</script>

Upvotes: 4

Related Questions