Comment importer des CSS de node_modules dans webpack angular2 app

Disons que nous commençons par la suite starter pack:
https://github.com/angularclass/angular2-webpack-starter

Après npm install et npm run start tout fonctionne bien.

Je veux ajouter un css externe, module, par exemple bootstrap 4 du css (et seulement le css). (Je sais que bootstrap est un bootstrap loader, mais maintenant je pose la question générale de la solution, de sorte s'il vous plaît penser bootstrap 4 ici qu'il pourrait être un autre css du module qui est disponible via npm).

- Je installer bootstrap via npm: npm install [email protected] --save

J'ai d'abord pensé qu'il suffit d'ajouter import 'bootstrap/dist/css/bootstrap.css'; pour le vendeur.le navigateur.ts fichier.

Mais il n'est pas.

Que dois-je faire pour avoir une bonne solution?

Solutions je ne demande PAS de:

"Copier le css externe du module dans le dossier actifs, et de l'utiliser à partir de là"
- Je suis à la recherche d'une solution qui fonctionne avec npm paquet.
"Utiliser bootstrap loader pour webpack"
- Comme je l'ai décrit ci-dessus, je suis à la recherche d'une solution générale, bootstrap n'est qu'un exemple ici.
"Utilisation d'une autre pile"
- Je suis à la recherche d'une solution exactement dans le pack de départ que j'ai mentionné ci-dessus.

En êtes-vous des erreurs?
C'est officiellement le meilleur à ce thread, j'ai jamais été sur. Stellaire question et deux également stellaire réponses. Merci à tous.

InformationsquelleAutor Burnee | 2016-10-16

64

Vous ne serez pas en mesure d'importer une feuille css de votre vendeurs fichier à l'aide de la pile, sans faire des changements.

Pourquoi? Eh bien parce que cette ligne:
```
import 'bootstrap/dist/css/bootstrap.css';
```
C'est seulement l'importation de vos css en tant que chaîne de caractères, alors qu'en réalité, ce que vous voulez, c'est votre fournisseur css dans une balise style. Si vous cochez config/webpack.commons.js vous trouverez cette règle:
```
 {
   test: /\.css$/,
   loaders: ['to-string-loader', 'css-loader']
 },
```
Cette règle permet à vos composants à importer les fichiers css, essentiellement ceci:
```
@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.component.css' //this why you import css as string
  ],
```
Dans le AppComponent il n'y a pas d'encapsulation, à cause de cette ligne encapsulation: ViewEncapsulation.None, qui signifie que toutes les règles css sera appliquée globalement à votre application. Ainsi, vous pouvez importer le fichier de bootstrap styles dans votre application composant:
```
@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.component.css',
    '../../node_modules/bootstrap/dist/css/bootstrap.css'
  ],
```
Mais si vous insistez dans l'importation de votre vendor.ts alors vous aurez besoin d'installer un nouveau chargeur, npm i style-loader --save-dev cela permettra webpack à injecter css de votre page. Ensuite, vous devez créer une règle spécifique, sur votre webpack.common.js et de modifier l'existant:
```
 { //this rule will only be used for any vendors
   test: /\.css$/,
   loaders: ['style-loader', 'css-loader'],
   include: [/node_modules/]
 },
 {
   test: /\.css$/,
   loaders: ['to-string-loader', 'css-loader'],
   exclude: [/node_modules/] //add this line so we ignore css coming from node_modules
 },
```
La première règle sera appliquée uniquement lorsque vous essayez d'importer des css, de n'importe quel paquet à l'intérieur de node_modules la deuxième règle sera appliquée à tout le css que vous importez à partir de l'extérieur de la node_modules
- Merci mec, c'est une sorte de réponse parfaite que je cherchais. Les deux solution fonctionne bien. Une chose que je ne savais pas, c'est qu'il est possible de cibler node_modules de styleUrls. Est-il aussi un préféré chose à faire?
- Il n'y a pas de bonne ou de mauvaise, soit elles sont valides, mais si dans le futur, prévoyez-vous d'avoir votre fournisseur.css dans un fichier séparé puis, la dernière est la meilleure option.
- notez que le angular2-webpack-starter a déjà style-loader dans son paquet.json (ce qui signifie qu'aucune autre npm install est nécessaire de l'utiliser dans cet exemple)
- vrai, mais c'est bot être utilisé n'importe où, de sorte qu'ils pourraient retirer dans l'avenir. Il en sera de laisser la réponse, juste au cas où, pour les futurs lecteurs.
InformationsquelleAutor Fabio Antunes
81

Il est possible en utilisant @import '~bootstrap/dist/css/bootstrap.css'; sur les styles.fichier css. (Note de l' ~)

Edit: Comment ça marche - Le '~' est un alias défini sur le webpack config pointant vers le dossier assets... simple comme ça..

Edit 2: Exemple sur la façon de configurer webpack avec le '~' alias...
cela devrait aller sur le webpack fichier de configuration (généralement webpack.config.js)...

JS:
```
//look for the "resolve" property and add the following...
//you might need to require the asset like '~/bootsrap/...'
resolve: {
  alias: {
    '~': path.resolve('./node_modules')
  }
}
```
- Cela a fonctionné pour moi et j'aime vraiment l'idée de garder mon css fichiers contenus donc je n'ai pas envie d'utiliser le ViewEncapsulation.aucun deal. Mais comment cela fonctionne?
- Autant que je sais, c'est quelque chose sur le compilateur, mais depuis que je ne suis pas un expert, je vais laisser ça à quelqu'un qui sait le mieux pour expliquer comment cela fonctionne...
- J'ai essayé ceci mais obtenez un message d'erreur: GET localhost:55490/~bootstrap/css/bootstrap.min.css 404 (Non Trouvé)
- Pour ceux qui veulent comprendre comment cela fonctionne, voici une belle lecture de blog.angularindepth.com/...
- un an plus tard, et cela a fonctionné parfaitement, merci !
- Cela n'a pas l'habitude de travailler dans Angulaire 6, mais il fonctionne Angulaire 7. Je ne peux pas voir quoi que ce soit dans le changelog qui explique pourquoi, bien. Quelqu'un sait?
- comme je l'ai expliqué dans l'édition, il ne fonctionne que parce qu'il est configuré dans webpack. Probabbly il n'a pas été correctement configuré sur votre angulaire 6 projet. Je vais modifier ma réponse, là encore, avec des exemples...
InformationsquelleAutor Anderson Ivan Witzke

Voici donc un moyen d'importer divers CSS fichiers à l'aide de la angular-cli que je trouve la plus pratique.

Fondamentalement, vous pouvez vous référer à la CSS fichiers (l'ordre est important si vous leur remplaçant) dans la config et angular-cli prendra soin du reste. Par exemple, vous souhaiterez peut-être inclure un couple de styles de nœud-modules, ce qui peut être fait comme suit:

"styles": [
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "../node_modules/primeng/resources/primeng.min.css",
    "styles.css"
  ]

Un échantillon complet-config pourrait ressembler à ceci:

.angulaire de la cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-angular-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

InformationsquelleAutor Himanshu Arora

Vous devez vous connecter pour publier un commentaire.