Help us understand the problem. What is going on with this article?

AMPとgulp-sassでハマるから気をつけろ

More than 3 years have passed since last update.

TL; DR

  • AMPページ内では@charset "UTF-8";がエラーになる
  • gulp-sass は、コンパイルするファイル内にマルチバイト文字が存在すると @charset "UTF-8"; を自動で出力する
  • コメントに日本語とか入れないように気をつけよう

やりたかったこと

WebサービスのCSSコンパイル周りが老朽化していたので、イイ感じにしようとした。

これまでは、Sass(Ruby製) & Compass(Ruby製) で吐き出したものを使っていて、

  • Rubyに依存している
  • コンパイルが重い
  • Compassが不要になったベンダープレフィックス付きのスタイルシートを吐き出す
  • Compassが開発終了しているのに使っている

みたいなところに問題を感じていたので、
以下の3つをやって、先ほど述べた問題を解決しようとした。

  • Compassをやめる
  • Sass(Ruby製) から Sass(Node製) に乗り換える
  • Autoprefixer と PostCSS を導入して、適切なベンダープレフィックスだけを付与する

躓き

一通り移行作業は完了していたが、最後でAMPページのテストが転けていることに気がついた。
(ちなみにテストは amphtml-validator を使って書いている)

テストが転けたところを見ると 'CSS syntax error in tag \'style amp-custom\' - saw invalid at rule \'@charset\'.' とのことである。
どうやら、「AMPページの中では @charaset は使えないよ。」 と言っているらしい。

コンパイルされた CSS を見ると、たしかに @charset "UTF-8"; が出力されている。
しかし、元の .scss ファイル内では、一切 @charaset の指定を行っていない。
そもそも、Compassでコンパイルしていたときはエラーは起きていなかった。

「なぜ?どこで? @charaset が挿入されたの?」となった。

原因

結果、

gulp-sass は、コンパイルするファイル内にマルチバイト文字が存在すると @charset "UTF-8"; を自動で出力する

という問題があり、これが原因だった。

たしかに、日本語でコメントが書かれていた。

対処

sample.scss
/* amp の専用タグに対応させるもの用 */

となっていたところを

sample.scss
/* for amp tags */

に変えたところ、テストが成功した。

雑感

自動で挿入とかマジでやめてくれ。
Autoprefixerを疑って時間が溶けたしつらいし、おうちかえる。

0x50
コーダーです。インターフェイス周りのデザインや実装をやります。フロントエンドからサーバーサイドまで、色んな領域に足を突っ込んでは引き抜いてを繰り返しています。
http://p1ch.jp
dena_coltd
    Delight and Impact the World
https://dena.com/jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした