Как добавить scss библиотеки Angular в пакет с помощью ng-packagr?

Я пытаюсь создать библиотеку Angular (ng 11) на основе scss-тем, которую я буду использовать в отдельных проектах через частный реестр npm. Прямо сейчас я пытаюсь добавить глобальный файл scss в свою библиотеку и связать его с моей библиотекой.

Что я хочу:

скажем, я храню свой scss в проектах / my-lib / src / styles / _material.scss:

// Import library functions for theme creation.
@import '~@angular/material/theming';

// Include non-theme styles for core.
@include mat-core();

// Define your application's custom theme.
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);

// Include theme styles for Angular Material components.
@include angular-material-theme($theme);

структура папок приложения и библиотеки angular

Я хочу, чтобы мой пакет (пакет библиотеки) содержал этот scss, чтобы после установки этого библиотечного приложения можно было импортировать его в свой глобальный файл style.scss.

проекты / мое приложение / src / style.scss

@import 'my-lib/_material.scss'

Что я сделал:

Я следил за этой документацией из angular Управление активами в библиотеке

библиотека package.json (для простоты я сохранил файл scss вне папки src прямо сейчас):

{
  "$schema": "./node_modules/ng-packagr/package.schema.json",
  "name": "ui-sdk",
  "version": "0.0.1",
  "ngPackage": {
    "assets": [
      "CHANGELOG.md",
      "./styles/material.scss"
    ],
    "lib": {
      "entryFile": "src/public-api.ts"
    }
  },
  "peerDependencies": {
    "@angular/common": "^9.0.6",
    "@angular/core": "^9.0.6",
    "tslib": "^1.10.0",
    "ng-packagr": "^11.2.4"
  },
  "dependencies": {
  }
}

После внесения этих изменений я столкнулся с двумя проблемами:

  1. ng build добавляет пакет библиотеки в проекты / my-lib / dist
  2. пакет библиотеки не содержит папки библиотеки (my-lib), поэтому не может определить путь.

папка dist находится внутри папки библиотеки

dist не содержит папки библиотеки

Может ли кто-нибудь объяснить, как мы можем создать библиотеку, в которую я могу добавлять темы, а приложение, которое расширяет эти темы, может использовать эту тему? Я пробовал официальные документы, а также другие источники, но не нашел решения.

Любая помощь или ссылка будут очень признательны!


person Alwaysalearner    schedule 05.03.2021    source источник


Ответы (1)


Я столкнулся с аналогичной проблемой с ng-packagr. Я еще не нашел правильного способа сделать это, но вы можете просто скопировать файл .scss вручную в окончательную сборку. Вы можете использовать ncp - Асинхронное рекурсивное копирование файлов и каталогов, чтобы скопировать файл в окончательную сборку.

после последней команды сборки просто добавьте && ncp currentpathOfSCSSFile destinationPathOfFinalBuildDistFolder

Просто обходной путь, но он решит эту проблему;)

person Guruprasad mishra    schedule 05.03.2021
comment
Гурупрасад мишра Спасибо, что поделились этим решением. Я попробовал это, npm i ncp, а затем запустил ncp \ ./ projects / ui-sdk / src / lib / styles / ** / * \ \ ./ dist / ui-sdk / styles \ после сборки библиотеки, но получил ошибку sh: ncp: command not found Я установил ncp в основное пространство своего проекта и попытался установить его в рамках проекта библиотеки. - person Alwaysalearner; 06.03.2021
comment
проверьте, добавлен ли ncp в package.json или нет, проверьте зависимости / devDependencies. если это так, попробуйте удалить package-lock.json и снова запустите npm install. А также укажите относительный путь от источника к месту назначения ncp ../projects/ui-sdk/src/lib/styles/style.scss ./dist/ui-sdk/styles/style.scss. Сообщите мне, что вы пытались решить эту проблему. Спасибо - person Guruprasad mishra; 07.03.2021
comment
дайте мне знать, работает ли решение или вы столкнулись с какой-либо другой проблемой. Также, если вы применяете другой подход, дайте мне знать. Спасибо - person Guruprasad mishra; 08.03.2021
comment
Гурупрасад мишра Привет, я нашел решение, опубликую здесь вскоре после тестирования. - person Alwaysalearner; 09.03.2021