web-dev-qa-db-fra.com

Chargement de plusieurs feuilles de style pour un composant dans Angular2

Je construis une application angular2. Je suis confronté à plusieurs problèmes lorsque j'essaie de charger plusieurs feuilles de style pour le même composant. Voici le code de ce que je fais:

import { Component } from '@angular/core';

@Component({
selector: 'my-tag',
templateUrl: 'my-tag.component.html',
styleUrls: [
    './style1.css',
    './style2.css'
    ]
})
export class MyTagComponent{}

Maintenant voici mes problèmes:

Quand j'essaie d'inclure le fichier css d'un autre répertoire comme ceci:

styleUrls: [
    './style1.css',
    '../public/style2.css'
]

Je reçois l'erreur

Uncaught Error: Expected 'styles' to be an array of strings.

dans la console du navigateur. 

J'ai ensuite inclus la deuxième feuille de style style2.css dans le répertoire du composant et écrit le premier extrait. Le style est en cours de chargement, mais globalement. La deuxième feuille de style a des noms de classes qui entrent en conflit avec le bootstrap et au lieu du style de bootstrap, le style du deuxième feuille de style est appliqué globalement, c'est-à-dire que les modèles des autres composants sont stylés à partir du deuxième feuille de style. 

Les URL répertoriées dans styleUrls ne doivent-elles pas être appliquées uniquement au composant et ne pas nuire aux autres composants?

Quelqu'un peut-il me dire comment charger plusieurs fichiers CSS pour un composant spécifique sans être appliqué globalement.

J'ai également essayé les solutions suivantes, mais le style est appliqué à tous les composants que j'ai créés.

styles: [
      require('./style1.css').toString(),
      require('../public/style2.css').toString()
 ]

P.S. J'utilise Webpack en tant qu'ensemble de modules pour mon projet.

webpack.config (extrait) 

 {
    test: /\.css$/,
    exclude: helpers.root('src', 'app'),
    loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
  },
  {
    test: /\.css$/,
    include: helpers.root('src', 'app'),
    loader: 'raw'
  }
csstwitter-bootstrapangularwebpackstyles
6
kanra-san

J'ai vu cette approche utilisée:

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
}

Où app.component.css contient plusieurs importations, ainsi:

@import url('/assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css');
@import url('/assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.css');
@import url('/assets/plugins/ionRangeSlider/css/ion.rangeSlider.css');
@import url('/assets/plugins/ionRangeSlider/css/ion.rangeSlider.skinNice.css');

J'espère que ça aide. 

10
davaus

Nous incluons le modèle et les fichiers CSS en définissant les propriétés de métadonnées templateUrl et styleUrls, respectivement. Étant donné que ces fichiers sont situés au même endroit que le composant, il serait agréable de s'y référer par leur nom sans avoir à spécifier un chemin d'accès à la racine de l'application.

Nous pouvons changer la façon dont Angular calcule l'URL complète en définissant la propriété moduleId de la métadonnée du composant sur module.id .

@Component({
  selector: 'my-tag',
  moduleId: module.id,
  templateUrl: 'my-tag.component.html',
  styleUrls:  ['style1.css', 'style2.css']
})
export class MyTagComponent { }

Mise à jour n ° 1

pour webpack: 

Essayez d'utiliser le 'to-string-loader' pour les CSS dans la configuration Webpack.

{ test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] }

J'espère que ça marchera pour vous.

1
Avnesh Shakya

Je crois que le problème est lié à l'argument 'style' que vous transmettez à ExtractPlugin.extract (loader: options | objet). Je pense que cela fait référence à ce chargeur: https://github.com/webpack/style-loader qui ajoute une balise de style au DOM et appliquera ainsi vos styles de manière globale.

J’ai rencontré ce problème l’autre jour et je n’ai cherché que la justification ci-dessus pour le bien de cet article. Je devrais revenir en arrière et régler le problème correctement, mais j’ai contourné le problème en utilisant simplement le css-loader comme ceci:

  {
    test: /\.css$/,
    loader: "css-loader"
  }

vous pouvez également définir l'encapsulation sur ViewEncapsulation.Native et, comme vous l'avez indiqué précédemment, appeler .toString () sur le fichier CSS chargé. J'imagine que ExtractTextPlugin pourrait toujours être utilisé à la place avec le chargeur de "style" supprimé.

0
James