CODEWITHSUNDEEP
csssasswebstorm
xRay
xRay

Reputation: 801

Why does WebStorm throw 'Can't find stylesheet to import' when using the Sass file watcher?

I am importing a Sass file into my component with

@import 'src/assets/sass/var'

In the browser everything is correct but WebStorm tells me:

Error: Can't find stylesheet to import.

@import 'src/assets/sass/var'

home.component.css looks like this:

/* Error: Can't find stylesheet to import.
 *   ,
 * 1 | @import 'src/assets/sass/var'
 *   |         ^^^^^^^^^^^^^^^^^^^^^
 *   '
 *   home.component.sass 1:9  root stylesheet */

body::before {
  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
      "Droid Sans Mono", monospace, monospace;
  white-space: pre;
  display: block;
  padding: 1em;
  margin-bottom: 1em;
  border-bottom: 2px solid black;
  content: "Error: Can't find stylesheet to import.\a   \2577 \a 1 \2502  @import 'src/assets/sass/var'\d\a   \2502          ^^^^^^^^^^^^^^^^^^^^^\a   \2575 \a   home.component.sass 1:9  root stylesheet";
}

Why do I get this error?

Upvotes: 0

Views: 1057

Answers (1)

lena
lena

Reputation: 93868

This error comes from the Sass compiler, not from the IDE itself.

Option 1 is to specify a valid relative path in import e.g. change the import to @import "./path/from/your/file/var";.

If you don't want to change the import, option 2 is to pass a load path to the compiler to get the import resolved by specifying the folder(s) the compiler should look for .scss file(s) in.

WebStorm (2023.2.5) > Settings > Tools > File Watchers > SCSS watcher

Edit the arguments setting to add the load-path argument i.e

--load-path ../../node_modules ...

enter image description here

Note that the folder path should be relative to the Sass compiler's working directory (Working directory setting) - WebStorm by default only looks inside the file directory.

Upvotes: 1

Related Questions