sass

Sass throwing "Error: Can't find stylesheet to import"

Folder structure:

Folder structure

Error description:

Error

Sass version:

enter image description here

ParcelJS solved my problem by being able to compile my Sass/Scss code into plain CSS but i don't want to use it in such a small project like this one.

OS: MX Linux.

Sass is able to compile my code just fine if i don't use @use or @import.

Solution

  • Try importing like below with a relative path:

    @use './abstracts/resets';

    Here is an overview of how Sass imports files:

    Finding the File

    It wouldn’t be any fun to write out absolute URLs for every stylesheet you import, so Sass’s algorithm for finding a file to import makes it a little easier. For starters, you don’t have to explicitly write out the extension of the file you want to import; @import "variables" will automatically load variables.scss, variables.sass, or variables.css.

    ⚠️ Heads up

    To ensure that stylesheets work on every operating system, Sass imports files by URL, not by file path. This means you need to use forward slashes, not backslashes, even when you’re on Windows.

    Load Paths

    All Sass implementations allow users to provide load paths: paths on the filesystem that Sass will look in when resolving imports. For example, if you pass node_modules/susy/sass as a load path, you can use @import "susy" to load node_modules/susy/sass/susy.scss.

    Imports will always be resolved relative to the current file first, though. Load paths will only be used if no relative file exists that matches the import. This ensures that you can’t accidentally mess up your relative imports when you add a new library.

    💡 Fun fact:

    Unlike some other languages, Sass doesn’t require that you use ./ for relative imports. Relative imports are always available.