Тема "Импорт угловых материалов" в Nrwl Nx libs

Question

У меня есть рабочее пространство nrwl nx с приложениями и библиотеками.

В одной из моих библиотек я хочу импортировать тему угловых материалов, но в браузере я получаю следующее предупреждение:

Не удалось найти основную тему Angular Material. Большинство компонентов материала могут работать не так, как ожидалось. Для получения дополнительной информации обратитесь к руководству по темам: https://material.angular.io/guide/theming

Я импортировал следующую строку в моем list.component.scss:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

На самом деле, я хочу импортировать это в styles.scss, но styles.scss недоступно в libs и если я добавлю один, я не знаю, где ссылаться на него.

Answer 1

Без каких-либо проблем я импортирую Angular Material в Nx, используя ng add @angular/material, не забудьте иметь в angular.json установка

"styles": [
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
]

Answer 2

Можете ли вы попробовать добавить тематику в приложение style.css?

Это то, что у меня есть в моей настройке. У меня есть библиотека, которая содержит Login.component. шаблон использует материальные компоненты. Я добавил импорт стилей в приложение style.css, которое импортирует эту библиотеку для использования компонента входа в систему. Это работает для меня.

Answer 3

@DAG Я сделал нечто подобное с одним из моих проектов. Вот несколько вещей, которые я сделал.

(Если вы еще этого не сделали, установите его с помощью npm install --save @angular/material @angular/cdk @angular/animations)

После того, как вы установили материальный дизайн и стали доступны в node_modules. В этом примере у нас есть имя рабочей области demo и имя файла стиля demo-styles.scss и имя библиотеки my-lib

1. создайте новую библиотеку в своем рабочем пространстве, используя ng g lib demoLibи следуйте инструкциям по командной строке и выберите no для создания модуля внутри библиотеки.
2. Это даст вам библиотеку с каталогом src, в котором ничего нет.
3. Затем вы можете продолжить и добавить новый каталог с именем styles под srcкаталог. Как только вы это сделаете, вы можете добавить различные файлы стилей внутрьstyles каталог.

4. Обновите tsconfig, чтобы он ссылался на вашу новую папку стилей.

   {{"compilerOptions": {"path": {"@demo / my-liib/*": [" библиотеки / my-lib / src / styles/*"]}}}

5. Как только вы это сделаете,

   • вы можете импортировать эту библиотеку в app/styles.scss с

     @import demo/my-lib/styles/demo-styles.scss.

Теперь вы сможете работать со стилями, определенными в stylefile.scss. Надеюсь это поможет.

Answer 4

Вдохновляйтесь @angular/material сама библиотека, и как они обеспечивают _theming.scss файл, который построен с sass-bundler (если я правильно помню).

Однажды я сделал это в одной из моих библиотек, и мне пришлось использовать его стили точно так же, как вы делаете это с самим материалом, для следующих проектов я просто решил использовать эти стили в глобальных стилях моего приложения, так как я не публиковал библиотеку в любом случае.