WebStorm 找不到 Sass 文件答案

【问题标题】：WebStorm can't find Sass fileWebStorm 找不到 Sass 文件
【发布时间】：2020-01-21 14:40:52
【问题描述】：

我正在将一个 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";
}

为什么会出现这个错误？

【问题讨论】：

标签： css sass webstorm

【解决方案1】：

错误来自 SASS 编译器，而不是来自 IDE。您需要在导入中指定一个有效的相对路径，或者将 load path 传递给编译器以解析导入。

只需将导入更改为@import "./path/from/your/file/var";，或在编译器参数中使用--load-path 选项（请参阅https://sass-lang.com/documentation/cli/dart-sass#load-path）来指定编译器应在其中查找.scss 文件的文件夹。请注意，文件夹路径应为相对于编译器工作目录（在文件观察器 Working directory: 字段中指定）

【讨论】：