Невозможно иметь файл темы, который можно было бы использовать во всех файлах Sass

Цель

Моя цель — иметь @use '@angular/material' as mat в theme.sass и импортировать или использовать theme.sass в любых других файлах 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, я получу эту ошибку:

Error: Can't find stylesheet to import.
  ╷
1 │ @use '@angular/material' as mat
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  ..\theme.sass 1:1  @use
  colors.sass 1:1     root stylesheet
```

Вы можете найти этот проект на GitHub . Пожалуйста, смотрите src/theme.sass и src/styles/colors.sass

Я использую последнюю версию WebStorm со следующими аргументами Sass:

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

2
88
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. Насколько я вижу, в вашем коде нет ошибок!

Раздвоенная ветка