Sass (Scss) で Error: File to import not found or unreadable というエラーが発生したときの解決方法をご紹介します。

エラーメッセージ File to import not found or unreadable

ファイルが存在しない or 読み込み権限が無いなどの理由で @import できないエラーメッセージが発生しました。

Details:
    status: 1
    file: /app/assets/stylesheets/style.scss
    line: 8
    column: 1
    formatted: Error: File to import not found or unreadable: ../../shared/stylesheets/foundation/variabe/_color.
       Parent style sheet: /app/assets/stylesheets/style.scss
        on line 8 of app/assets/stylesheets/style.scss
>> @import '../../shared/stylesheets/foundation/variabe/_color';

エラー解決方法

以下、エラー File to import not found or unreadable の解決方法を

.scss ファイルの絶対パス・相対パスの確認

まず、@import で指定した .scss ファイルの絶対パス or 相対パスの指定が正しいか確認しましょう。

../ が１階層だけ多い or 少ないということは、よくあるのでその辺りを重点的に確認するといいんじゃないでしょうか。

.scss ファイルの権限確認

ファイルパスが問題なければ、次は ls -l コマンドで @import で読み込む .scss ファイルの権限を確認しましょう。

ls コマンドは、

ls -l your_path/your_file.scss

みたいに使うイメージです。

いずれかの方法で File to import not found or unreadable エラーが解決すれば幸いです。