Попытка импортировать файл темы углового материала в мою пользовательскую тему, но файл не найден

Question

Я попытался импортировать файл угловой темы материала в свою собственную тему, и когда я пытаюсь сгенерировать код CSS, у меня появляется ошибка:

$ sass src/_custom-theme.scss
Error: Can't find stylesheet to import.
  ╷
2 │ @import '~@angular/material/_theming.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

Это первая строка моего файла. Я также попытался со следующей строкой, но я получаю ту же ошибку:

@import '~@angular/material/theming';

Если я пытаюсь импортировать файл следующим образом:

@import '../node_modules/@angular/material/theming';

Но любопытно, что, импортируя готовую тему, подобную этой, просто для теста, она работает

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'

WebStorm удается сгенерировать CSS и использовать его, когда он запускает веб-приложение с ng serve, но все равно отображает сообщение об ошибке. Сообщение об ошибке отображается с веб-штормом и sass

Версия:

• Угловой: 7.2.12
• Материал: 7.3.7
• Sass: 1.17.4 скомпилировано с dart2js 2.2.0

У вас есть идея решить эту проблему? Большое спасибо.

Answer 1

В зависимости от структуры вашего приложения вы можете настроить путь для определения местоположения node_modules.

Если у вас есть _variable.scss в том же месте index.html, сделайте

@import './../node_modules/@angular/material/theming';