WebStorm 找不到 Sass 文件

Question

我正在将 Sass 文件导入到我的组件中

@import 'src/assets/sass/var'

在浏览器中一切都是正确的，但 WebStorm 告诉我：

错误：找不到要导入的样式表。

@import 'src/assets/sass/var'

home.component.css 看起来像这样：

/* 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";
}

为什么我会收到此错误？

Answer 1

此错误来自 Sass 编译器，而不是 IDE 本身。

---

选项 1 是在导入时指定有效的相对路径，例如将导入更改为

@import "./path/from/your/file/var";

。

---

如果您不想更改导入，选项 2 是将 加载路径 传递给编译器，通过指定编译器应在其中查找

.scss

文件的文件夹来解析导入.

WebStorm (2023.2.5) > 设置 > 工具 > 文件观察器 > SCSS 观察器

编辑 arguments 设置以添加

load-path

参数，即

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

请注意，文件夹路径应相对于 Sass 编译器的工作目录（工作目录设置） - WebStorm 默认情况下仅查看文件目录内部。