web-dev-qa-db-fra.com

Angular 6 feuilles de style partagées de la bibliothèque

Comment pouvez-vous configurer un index.scss et importer des feuilles de style globales pour les variables, mixins, etc., dans une bibliothèque angular 6?

La CLI angulaire génère une bibliothèque avec un composant racine et un composant scss, mais les styles ajoutés ou importés au composant racine ne sont pas disponibles pour les composants enfants. Ce qui est logique par défaut pour encapsuler les styles, mais je ne trouve pas encore d'informations ou d'exemples sur la façon de configurer cela.

Le angular.json "styles": [...] chemins pouvant être utilisés pour cela avec "projectType": "application", ne semble pas fonctionner avec "projectType": "library" non plus.

Merci d'avance pour votre aide!

MISE À JOUR: Mon projet a été lancé en utilisant angular cli v6.0.5, en suivant ce guide: https://medium.com/@tomsu/how-to-build-a-library -for-angular-apps-4f9b38b0ed11

TL; DR pour le guide:

ng new my-app --style=scss
ng generate library my-library --prefix ml

C'est la structure du fichier angular 6 génère:

    my-app
      projects/
        my-library/
          src/
            lib/
              shared/..
              widgets/..
              my-library.component.ts
              my-library.module.ts
            sass/
              _variables.scss
              styles.scss // <<< This is where I want to `@import 'variables';`, and for it to be available in all the components of the "my-library" project.
            public_api.ts
      src/
        app/
          app.module.ts // << imports projects/my-library/lib/my-library.module as "my-library".
        main.ts
        index.scss
        index.html
      README.md

Versions du package:

    Angular CLI: 6.0.5
    Node: 10.2.1
    OS: darwin x64
    Angular: 6.0.3
    ... animations, common, compiler, compiler-cli, core, forms
    ... http, language-service, platform-browser
    ... platform-browser-dynamic, router

    Package                            Version
    ------------------------------------------------------------
    @angular-devkit/architect          0.6.5
    @angular-devkit/build-angular      0.6.5
    @angular-devkit/build-ng-packagr   0.6.5
    @angular-devkit/build-optimizer    0.6.5
    @angular-devkit/core               0.6.5
    @angular-devkit/schematics         0.6.5
    @angular/cli                       6.0.5
    @ngtools/json-schema               1.1.0
    @ngtools/webpack                   6.0.5
    @schematics/angular                0.6.5
    @schematics/update                 0.6.5
    ng-packagr                         3.0.0
    rxjs                               6.2.0
    TypeScript                         2.7.2
    webpack                            4.8.3
angularangular-clilibrariesangular6angular-cli-v6
22
xaunlopez

Pour les styles globaux, j'ai répondu en cette question .

Pour les mixins et les variables, il existe également une solution de contournement.

  1. Créé un index.scss fichier dans le dossier racine de votre bibliothèque. Si vous suivez ce guide de Angular , alors votre chemin sera my-project/projects/my-library/index.scss. C'est également le dossier où votre package.json est.

Alors, index.scss sera le fichier avec vos variables et mixins

$grey: #222;
@mixin mymixin {
    background: #222;
}
  1. Incluez ceci dans vos fichiers scss de bibliothèque en utilisant import
@import '../../index.scss';

ou quel que soit le chemin relatif de votre fichier scss de composant.

  1. Maintenant, afin d'avoir ce fichier dans votre projet d'application, copiez-le post build dans le répertoire dist. Pour ce faire, modifiez votre angular projet de bibliothèque package.json fichier (PAS LA BIBLIOTHEQUE).
{
    "name": "my-project",
    "version": "1.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build && npm run copyScss",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "copyScss": "xcopy \"projects\my-library\index.scss\" \"dist\\my-library\\\""
    },

    ...
}

  1. Maintenant, très important, N'utilisez PAS ng build pour construire votre bibliothèque, utilisez plutôt npm run build. Cela exécutera automatiquement la commande de copie. Maintenant le index.scss le fichier est exporté avec votre bibliothèque dans le my-project/dist dossier.

  2. Inclure le index.scss dans les fichiers scss de votre projet d'application

// ~ stands for the node_modules folder
@import '~my-library/index.scss';

Maintenant, vous avez tous vos mixins de bibliothèque dans tous les projets que vous avez installés dans votre bibliothèque.

À votre santé!

[~ # ~] ps [~ # ~] Les solutions de contournement ne sont pas les solutions les plus élégantes, mais quand rien d'autre ne fonctionne, elles fonctionnent!

2
Neil Patrao

Avez-vous essayé de définir le niveau d'encapsulation du composant sur aucun dans le cadre des métadonnées du composant? Comme ça:

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
})

Les niveaux de ViewEncapsulation sont:

  • ViewEncapsulation.Emulated : la valeur par défaut, Angular émule un DOM fantôme.
  • ViewEncapsulation.Native : utilisez le propre Shadow DOM du navigateur.
  • ViewEncapsulation.None : les styles sont globaux

Consultez le Angular Docs sur ViewEncapsulation et j'ai écrit un blog sur elle .

0
JeffryHouser

Courir ng init sur le projet, afin qu'il initialise le projet en tant que projet CLI Angular CLI.

Edit: Mon mauvais, il semble qu'ils ont supprimé init de la CLI. Tu peux essayer ng new --src

Cela pourrait écraser certains fichiers, essayez donc ceci sur une copie du projet.

0
Arno4Jackie

Je pense que les gens peuvent manquer le fait que, bien qu'il existe des options d'encapsulation, les styles globaux sont générés dans des balises de style et peuvent se répercuter tout au long de votre projet.

Voici ma configuration:

enter image description here

  1. Mes styles globaux: styles.scss est affiché dans les balises de style. Les règles ciblent toutes les classes et tous les éléments correspondants comme prévu. Même à l'intérieur des composants.

  2. Les styles de composants sont encapsulés. C'est leur valeur ajoutée. Ils écrasent les globaux et conservent les styles spécifiques aux composants avec la famille de composants.

  3. @includes tels que variables.scss, mixins.scss etc. sont inclus explicitement en haut des fichiers .scss des composants si nécessaire.

@import '../../../../scss/includes/variables';

De quoi d'autre aurions-nous besoin?

0
Ben Racicot