web-dev-qa-db-fra.com

Comment ajouter un style global à la bibliothèque angular 6/7)

J'essayais d'ajouter des styles globaux de la même manière que dans angular app, mais cela ne fonctionne absolument pas.

Le nom de ma bibliothèque est example-lib, alors j'ai ajouté styles.css À /projects/example-lib/. J'ai ajouté des styles dans le fichier principal 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 
        ],
      },
...

mais quand j'ai essayé de construire la bibliothèque en utilisant la commande:

ng build example-lib

J'ai eu une erreur:

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

J'imagine que c'est l'autre façon d'ajouter des styles globaux dans des bibliothèques séparées. Est-ce que quelqu'un peut m'aider?

cssangularstylesangular-library
20
Jaroslaw K.

J'ai une solution de contournement pour cela. Il suffit de créer le composant racine de votre bibliothèque sans encapsulation de vue et tous ses styles seront alors globaux.

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';

Maintenant, vos my-library.component.scss et core.scss sont global

styles/core.scss 

body {
    background: #333;
}

core.scss est facultatif, j'aime juste garder les fichiers racine propres.

Update : Si vous voulez aussi vos mixins et variables, alors suivez cette réponse .

7
Neil Patrao

De Compilation de CSS dans une nouvelle Angular 6 bibliothèques :

  1. installez quelques devDependencies dans notre bibliothèque afin de regrouper les fichiers css:

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

  2. Créer un css-bundle.ts

  3. Ajoutez _theme.scss dans le répertoire/src de la bibliothèque qui contient et importe tous les fichiers css que nous souhaitons regrouper.

  4. Ajoutez un script postbuild npm pour exécuter le css-bundle.ts :

  5. Incluez-le dans la balise styles de votre application dans le fichier angular.json
2
yazantahhan

De cette solution de solution

Installez cpx et scss-bundle comme dépendances de Dev à votre package.json. Ajoutez ensuite les entrées suivantes dans votre propriété "scripts" de 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\"",
  ...
}

Remplacez "mylib" par votre vrai nom de bibliothèque, puis lancez-le simplement dans votre terminal build-mylib. Cela compliquerait votre analyse dans votre dossier dist.

Vous utilisez ces styles globaux dans votre projet Angular projet, importez-les simplement dans votre angular.json fichier dans les paramètres de votre projet:

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

(utilisez dist si votre projet se trouve dans le même espace de travail ou node_moduled si c'est une bibliothèque importée)

1
Daniel Llano