Используйте одни и те же файлы стилей (.S CSS) для нескольких angular 8 проектов. - PullRequest
Новая
       19

Используйте одни и те же файлы стилей (.S CSS) для нескольких angular 8 проектов.

0 голосов
/ 16 января 2020

У меня есть разные проекты, разработанные в angular 8 и имеющие одинаковые стили.

Я хочу использовать одинаковые SCSS файлы, чтобы в будущем можно было вносить изменения в одном месте.

Я пробовал ниже, но это не работает для меня.

Компиляция css в новых Angular 6 библиотеках

Пожалуйста, укажите правильное направление.

Ответы [ 2 ]

1 голос
/ 16 января 2020

Например, вы можете:

  1. Создать свой пакет npm или yarn (он может быть закрытым) со стилями.
  2. Используйте его как package.json зависимость от различных проектов
  3. Прибыль)

Полезные ссылки:

https://docs.npmjs.com/creating-and-publishing-private-packages

https://docs.npmjs.com/creating-and-publishing-an-org-scoped-package

Другой вариант:

  1. создание одного angular проекта с одним package.json и angular.json
  2. имеют разные проекты в разных папках
  3. имеют общие стили, вставленные в каждый проект
  4. имеют разные команды в package.json для запуска разных проектов (на разных портах, если вам нужно запустить его одновременно)
  5. имеют разные конфигурации в angular.json для разных проектов
0 голосов
/ 17 января 2020

Моя проблема была решена с помощью ответа @ qiAlex, но здесь я выкладываю полную процедуру для решения подобных проблем.

Я получил решение ниже от https://github.com/linnenschmidt/build-ng-packagr.

Проблемы такого рода можно решить путем создания библиотеки angular, но по умолчанию angular build architect @ angular -devkit / build-ng-packagr для ng-packagr не копирует активы библиотек.

@ linnenschmidt / build-ng-packagr можно использовать для копирования активов библиотеки. Этот Angular Build Architect скопирует все ресурсы в сборке библиотеки.

Как установить

Установить @ linnenschmidt / build-ng-packagr в ваш angular проект.

npm install @ linnenschmidt / build-ng-packagr --save-dev

или

пряжа add @ linnenschmidt / build-ng-packagr --dev

Как использовать

Я). Замените архитектора сборки своих библиотек на @ linnenschmidt / build-ng-packagr: build. 

 "architect": {
        "build": {
          "builder": "@linnenschmidt/build-ng-packagr:build",

II). Добавьте правила глобальных ресурсов в раздел параметров, как обычно для приложений. 

 "options": {
            "tsConfig": "projects/weave-styles/tsconfig.lib.json",
            "project": "projects/weave-styles/ng-package.json",
            "assets": [
              "src/assets"
            ]
          }

Окончательный файл angular. json может выглядеть следующим образом: 

"weave-styles": {
      "projectType": "library",
      "root": "projects/weave-styles",
      "sourceRoot": "projects/weave-styles/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@linnenschmidt/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/weave-styles/tsconfig.lib.json",
            "project": "projects/weave-styles/ng-package.json",
            "assets": [
              "src/assets"
            ]
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/weave-styles/src/test.ts",
            "tsConfig": "projects/weave-styles/tsconfig.spec.json",
            "karmaConfig": "projects/weave-styles/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/weave-styles/tsconfig.lib.json",
              "projects/weave-styles/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
...