Le chargement de plusieurs feuilles de styles pour un composant dans Angular2

Je suis de la construction d'une angular2 application. Je suis confronté à de multiples problèmes quand j'essaye de charger plusieurs feuilles de styles pour le même composant. Ici est 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'ai essayer d'inclure le fichier css dans tout autre répertoire comme ceci:

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

Je reçois le message d'erreur

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

dans le navigateur de la console.

J'ai alors compris la deuxième feuille de style style2.css dans le répertoire de la composante et a écrit le premier extrait. Maintenant, le style est en train d'être chargé, mais c'est en cours de chargement à l'échelle mondiale. La deuxième feuille de style a des noms de classe qui clash avec le bootstrap et au lieu de bootstrap est le style de la deuxième feuille de style le style est appliqué à l'échelle mondiale, c'est à dire d'autres composants de modèles sont de style à partir de la deuxième feuille de style.

Ne devrait pas l'url répertoriées dans styleUrls être appliquée sur le composant et de ne pas faire du mal à d'autres composants?

Quelqu'un peut me dire comment charger plusieurs fichiers css pour un composant spécifique sans être appliquée à l'échelle mondiale.

J'ai aussi essayé les solutions ci-dessous, mais le style est appliquée sur tous les composants que j'ai fait.

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

P. S. je suis en utilisant webpack que le module de bundler 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'
  }

OriginalL'auteur kanra-san | 2016-11-23

11

J'ai vu cette approche utilisée:
```
@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
}
```
Où l'application.composante.css a de multiples importations, donc:
```
@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 cette aide.

Dans la version actuelle Angulaire 4, ne pourriez-vous faire ces déclarations d'importation dans le global styles.css fichier?
N'est-ce pas un peu à l'encontre du but de la transmission de valeurs comme un tableau dans styleUrls. Le nom du meta il s'auto suggèrent plusieurs feuilles de style.
Salut Kanra-san. Je suis d'accord; mais le tableau n'a pas fonctionné (j'ai essayé), et cette méthode n'.....

OriginalL'auteur davaus
1

Nous inclure le template et CSS fichiers en définissant la templateUrl et styleUrls propriétés de métadonnées respectivement. Parce que ces fichiers sont situés dans le composant, il serait bon de se référer à eux par leur nom sans avoir à spécifier un chemin de retour vers la racine de l'application.

Nous pouvons changer la façon Angulaire calcule l'URL complète d'être le composant de métadonnées du moduleId propriété module.id.
```
@Component({
  selector: 'my-tag',
  moduleId: module.id,
  templateUrl: 'my-tag.component.html',
  styleUrls:  ['style1.css', 'style2.css']
})
export class MyTagComponent { }
```
Mise à jour#1

pour webpack:

Essayez d'utiliser la chaîne de chargement' pour css dans webpack config.
```
{ test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] }
```
Espère va travailler pour vous.

Je suis à l'aide de webpack que le module de bundler. Votre solution fonctionne lorsque nous avons systemjs que le module de bundler.
J'ai ajouté des mises à jour pour webpack, découvrez la mise à Jour no 1 ci-dessus. Merci
J'ai essayé avec votre configuration, mais pas de chance. J'ai posté mon webpack.config ci-dessus. Corrigez-moi si je suis mal, mais leto-string-loader fait le même travail que toString() n'est-ce pas? Comme je l'ai mentionné ci-dessus, lorsque j'ajoute toString() la feuille de style est chargé, mais c'est en cours de chargement à l'échelle mondiale et tout autre élément composant est affecté par elle.
Essayez d'ajouter encapsulation: ViewEncapsulation.None dans votre composant de la balise meta pour cela, vous devez l'importer => import {ViewEncapsulation} from '@angular/core'; Caisse.
en fait, j'ai déjà essayé ça aussi, mais il a également été d'aucune utilité.

OriginalL'auteur Avnesh Shakya
0

Je croire le problème est avec le "style" de l'argument que vous passez à ExtractPlugin.extrait(chargeur: options|objet). Je pense qu'il fait référence à ce loader: https://github.com/webpack/style-loader qui ajoute une balise pour les DOM et ne sera donc appliquer vos styles à l'échelle mondiale.

J'ai rencontré ce problème l'autre jour, et seulement regardé au-dessus de la justification de l'intérêt de ce post et doit revenir en arrière et le fixer correctement avec cela à l'esprit, mais j'ai eu autour d'elle simplement à l'aide de la css-chargeur comme ceci:
```
  {
    test: /\.css$/,
    loader: "css-loader"
  }
```
ainsi que le réglage de l'encapsulation de ViewEncapsulation.Natif et, comme vous l'avez mentionné plus tôt, en l'appelant .toString() sur le chargement du CSS. J'imagine que le ExtractTextPlugin pourrait encore être utilisé à la place avec le "style" chargeur enlevé.

OriginalL'auteur James

Vous devez vous connecter pour publier un commentaire.