Как добавить глобальный стиль в библиотеку angular 6/7 - PullRequest
Новая
       19

Как добавить глобальный стиль в библиотеку angular 6/7

0 голосов
/ 19 ноября 2018

Я пытался добавить глобальные стили таким же образом, как в угловом приложении, но это полностью не работает.

Имя моей библиотеки example-lib , поэтому я добавил styles.css к /projects/example-lib/. Я добавил стили в основной angular.json файл: 

...
"example-lib": {
  "root": "projects/example-lib",
  "sourceRoot": "projects/example-lib/src",
  "projectType": "library",
  "prefix": "ngx",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-ng-packagr:build",
      "options": {
        "tsConfig": "projects/example-lib/tsconfig.lib.json",
        "project": "projects/example-lib/ng-package.json",
        "styles": [
          "projects/example-lib/styles.css" <!-- HERE 
        ],
      },
...

но когда я попытался собрать библиотеку с помощью команды:

ng build example-lib

Я получил ошибку: 

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(styles)

Полагаю, это другой способ добавить глобальные стили в отдельную библиотеку. Кто-нибудь может мне помочь?

Ответы [ 3 ]

0 голосов
/ 27 марта 2019

У меня есть обходной путь для этого.Просто создайте корневой компонент вашей библиотеки без инкапсуляции представления, и тогда все ее стили будут глобальными.

my-library.component.ts 

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'lib-my-library',
  templateUrl: './my-library.component.html',
  styleUrls: ['./my-library.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MyLibraryComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

my-library.component.html 

<!-- html content -->

my-library.component.scss 

@import './styles/core.scss';

Теперь ваша my-library.component.scss и core.scss являются глобальными

styles / core.scss 

body {
    background: #333;
}

core.scss не является обязательным, я просто хочу, чтобы корневые файлы были чистыми.

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

0 голосов
/ 01 июня 2019

С это решение проблемы

Установите cpx и scss-bundle как Dev-зависимости к вашему package.json.Затем добавьте следующие записи в ваше свойство "scripts" package.json: 

"scripts": {
  ...
  "build-mylib": "ng build mylib && npm run build-mylib-styles && npm run cp-mylib-assets",
  "build-mylib-styles": "cpx \"./projects/mylib/src/lib/style/**/*\" \"./dist/mylib/style\" && scss-bundle -e ./projects/mylib/src/lib/style/_style.scss -d ./dist/mylib/style/_styles.scss",
  "cp-mylib-assets": "cpx \"./src/assets/**/*\" \"./dist/mylib/assets\"",
  ...
}

Замените "mylib" на ваше реальное имя библиотеки и просто запустите в своем терминале build-mylib.Это скомпилировало бы ваши scss-асеты в вашу папку dist.

Вы можете использовать эти глобальные стили в вашем реальном Angular проекте, просто импортируйте их в ваш файл angular.json в настройках вашего проекта: 

"styles": [
  "src/styles.scss",
  "dist/my-shiny-library/_theme.scss"
],

(используйте dist, если ваш проект находится в той же рабочей области, или node_moduled, если это импортированная библиотека)

0 голосов
/ 20 февраля 2019

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

  1. установить некоторые devDependencies в нашей библиотеке, чтобы связать css:

    • ng-packagr
    • scss-bundle
    • ts-node

  2. Создание css-bundle.ts

  3. Добавьте _theme.scss в каталог / src библиотеки, которая фактически содержит и импортирует все CSS, которые мы хотим объединить.

  4. Добавьте скрипт пост-сборки npm для запуска css-bundle.ts :

  5. Включите его в тег стилей в вашем приложении в angular.json
...