I’ll introduce the solution for when you encounter the Error: File to import not found or unreadable error in Sass (Scss).

Error Message: File to import not found or unreadable

This error message occurs when @import fails due to reasons such as the file not existing or lacking read permissions.

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';

Error Resolution Methods

Below are the solution methods for the “File to import not found or unreadable” error:

Check Absolute/Relative Path of .scss File

First, check whether the absolute or relative path specification for the .scss file specified in @import is correct.

It’s common to have one ../ too many or too few, so it’s good to focus on checking around there.

Check .scss File Permissions

If the file path is fine, next use the ls -l command to check the permissions of the .scss file being imported.

The ls command is used like:

ls -l your_path/your_file.scss

I hope one of these methods resolves the “File to import not found or unreadable” error.

That’s all from the Gemba.