【React】styled-componentsのGlobalStyleがデプロイすると効かなくなるときの対処法

問題

Styled Components v4で実装されたAPI、createGlobalStyleでグローバルスタイルを適用します。

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    @import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
    font-family: 'Noto Sans JP', sans-serif;
  }
`;

すると、ローカル環境では正常に機能するが、デプロイするとグローバルスタイルが適用されないというケースがあります。

原因

ざっと調べた限りでは、これという原因はわかりませんでした。
たびたびissueでも取り上げられているようです。

ただ、@importの挙動が不安定ということらしいので、上記のコードの例に限っては、body内で@importしているところが怪しそうです。

対処法

@importをトップレベルに移動してきます。

const GlobalStyle = createGlobalStyle`
  @import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
  * {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
  }
`;

これで私の環境では問題は解消されました。
ただ、できれば@importは使わないほうがいいかもしれません。