【はじめてのSass】Koala+compassで発生したコンパイルエラーと解決策

案件でSassを使う機会があったのでこの機に身に付けようと思います。とりあえず最初にハマったコンパイルエラーと解決方法の覚えがきをば。

以下の記事を参考に、Koalaを導入してCompassモードでのコンパイルを行いました。

これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG Koala

    【エラー1】UTF-8 and Windows-31J うんたら

    エラーコード

    Encoding::CompatibilityError on line ["136"] of C: incompatible character encodings: UTF-8 and Windows-31J Run with --trace to see the full backtrace

    ファイルのパスに日本語の2byteが含まれていたことが原因っぽいかんじでした。

    自分はwindowsのユーザー名(Microsoftアカウント)を日本語にしてしまっているので、user配下に保存したscssファイルをコンパイルしようとするともれなくエラーになってしまっていたようです。

    解決策:Cドライブ直下に移動

    今回は、安直にCドライブ直下にフォルダを移してからコンパイルすると上記のエラーを吐かなくなりました。

    【エラー2】全角スペース

    エラーコード

    error sass/style.scss (Line 1: Invalid CSS after " @charset "UTF-8"": expected "{", was ";") Compilation failed in 1 files.

    全角スペースが入っていたため発生しました。

    解決策:全角スペースを削除

    全角スペースを削除したらエラーを吐かなくなりました。

    以上、初挑戦であれこれググりながら辿り着いた結果なので、正しい解法なのかどうかちょっと自信がないのですが、これでひとまず無事コンパイルできるようになりました。

    Sassを触るにあたっていろんな人のブログなども見たけど、皆さん総じて「いつかやろうと思ってたけどCSSで十分事足りてるから手を付けてなかった」と述べますが、自分もまったく同じパターンでした。

    しかし「実際触ってみると大変便利だ!もっと早く勉強したらよかった」とも書かれていて、それも完全に同意。とはいえまだSassの機能を全然活かせてないので、ちょっとずつ使えるように勉強していこうと思います。

    シェア
    広告
    野良人 代表
    新免祥太
    1988年岡山生まれ。外食企業のWEB・EC担当を経験したのち、2013年12月より「野良人(のらんど)」の屋号で独立しWEBデザイン・プログラミングなどWEBサイト制作の工程全般を請け負っています。お気軽にご相談ください。
    <次の記事(2016/03/20)
    【読んだ】佐藤可士和の 新しい ルール づくり(佐藤可士和・斎藤孝)
    前の記事>(2016/03/09)
    【読んだ】空想科学「理科」読本(柳田理科雄)
    記事一覧