无法拥有一个可以在所有Sass文件中使用的主题文件

Question

目标

我的目标是在

theme.sass

中拥有 @use '@angular/material' as mat 并在任何其他 sass 文件中导入或使用 theme.sass。

主题.sass:

@use '@angular/material' as mat

@include mat.core()
$localPalette: mat.$red-palette

到目前为止，没有错误，一切正常，但是如果另一个 sass 文件包含

@use "../theme" as style

或

@import "../theme"

或

@use "@angular/material" as mat

，我会收到此错误：

错误：找不到要导入的样式表。
  ╷
1 │ @use '@angular/material' 作为垫子
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  .. heme.sass 1:1 @use
  color.sass 1:1 根样式表
````

您可以在 GitHub 上找到此项目。请参阅 src/theme.sass 和 src/styles/colors.sass

我使用最新版本的 WebStorm 和以下 Sass 参数：

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

Answer 1

其实我试过你的代码没有这个问题。我做的唯一不同的是，我将

colors.sass

添加到

angular.json

，构建运行没有任何问题

...
"styles": [
          "src/theme.sass",
          "src/styles/colors.sass"
],
...

只有当我直接运行 sass 时，我才能得到这个错误！

sass ./src/theme.sass theme.css


sass ./src/styles/colors.sass colors.css

这两个都不知道已经存在的 Angular 材质代码，因此您会收到此错误，因为 sass 将在 Angular 中配置以查看 Node_modules 并从

node_modules

获取样式。据我所知，您的代码中没有错误！