SCSS Error: Can't find stylesheet to import.

I am attempting to use @import in custom.scss. I marked the scss folder as "Resources Root". While typing out the word "variables", PyCharm does detect that _variables.scss exists because it suggests it as I am typing.

When it's fully typed out, it looks like this:

@import "variables";

However, the console throws an error: "Error: Can't find stylesheet to import."

The only way I've been able to get this to work is if I do a full system absolute path starting from my C:/...

Is there something I'm doing wrong? Any tips I can try to get this to work? I AM using File Watchers if that is relevant. My custom.scss is under my File Watcher scope.

0
3 comments

the error comes from SASS compiler, not from the IDE. IDE tricks, like marking folders as Resource roots, won't work here, the compiler is not aware of them. You need to specify a valid relative path in import, or pass a load path to the compiler to get the import resolved.

Just change the import to @import "../path/to/node_modules/bootstrap/scss/variables";, or use --load-path option (see https://sass-lang.com/documentation/cli/dart-sass#load-path) in your compiler arguments to specify a folder the compiler should look for .scss file in. Note that the folder path should be relative to compiler working directory

2

Thanks Elena. I did get this to work. The thing that helped me understand it was to understand that the @import path is relative to the file I'm writing it in. For example, if my root project was "learnsass" and from there I had `static/project/scss/custom.scss`, my import would look like:

`@import "../../../node_modules/bootstrap/scss/variables";`

Using the `--load-path` command is something I didn't consider! I will try this out though for sure.

1

The correct arguments seem to be:

--load-path $ProjectFileDir$/node_modules $FileName$:$FileNameWithoutExtension$.css
0

Please sign in to leave a comment.