【SCSS】Compass+Koalaで@importを使う場合に「File to import not found」とエラーが出る場合の解決法

Koalaとcompassを使ってscssを作成する場合の注意すべ設定項目

CSSを書くときに非常に強力かつ便利な記法がscssと呼ばれるcssのメタ言語ですが、それらを使うには、Ruby、Koala、そしてCompassの3つを環境として構築して、scssファイルを作成するのが一般的だと思います。

私もそれら3つを導入しています。しかし、導入当初は、Compassをインストールしてscssファイルを作ったもののエラーが出て上手く動きませんでした。そのエラーとは「File to import not found~」というものでした。

そしてその解決法は非常に初歩的で簡単なものでした。同じエラーにハマって悩むcss(scss)初心者に参考になればと思い、解決法を書いておきます。

私の環境

  • Windows10
  • エディタとしてAtom使用
  • Ruby、Koala、その後Compassをインストールずみ

発生した問題とエラーメッセージ

問題が発生したのは、scssファイルで、

@import "compass/css3";

としたときです。インポート機能を使おうとしたときに、次のようなエラーメッセージが出ました。

File to import not found or unreadable: compass/css3

この後には、「Load path:~」と続いていました。

こちら実際のAtom上でのエラー画面です。

scssのエラー「File to import not found or unreadable: compass/css3」
Koala+Compassを使ったAtom上のscssファイルでのエラー「File to import not found or unreadable: compass/css3

解決方法

解決方法は簡単です。ずばり、Koalaにある設定項目(チェック項目)の「Compass Mode」の箇所にチェックを入れるだけです。次の画像を見てください。

KoalaとCompassを使う場合の設定方法・注意点
KoalaとCompassを使う場合の設定方法・注意点

開発しているscssファイルを選んで、「Compass Mode」のチェック項目にチェックを入れるだけです。

以上のようにするだけで、エラーメッセージがなくなり、正常にcssが作成され、htmlへ反映させることができました。

正常にCSSが反映されている。

KoalaとCompassを同時に使っている人で、「File to import not found or unreadable~」というエラーに悩んでいる人の助けになれば幸いです。

やっぱりプログラミングは独学だとわかりにくいですよね、そこでスクールや動画による解説を利用しましょう!

Tech Academy

厚切りジェイソンのCMでおなじみのプログラミングスクール。自宅でオンライン受講OK。現役のプロが一人一人に専属メンターになってくれ、質問すればすぐに回答。転職保証あり

Udemy

世界最大級のオンライン学習動画サービス。AI・データサイエンスなど最先端のプログラミング講座からビジネススキル講座まで10万以上の講座から選び放題。講師に掲示板から直接に質問もできる。