Comment importer des CSS de node_modules dans webpack angular2 app

Question

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

Après l' 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).

J'ai installer bootstrap via npm: npm install bootstrap@4.0.0-alpha.4 --save

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

Mais il n'est pas.

Que dois-je faire pour avoir une bonne solution?

Des Solutions, je ne suis PAS en demandant:

1. "Copie de la 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.
2. "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.
3. "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.

Answer 1

Il est possible par l'utilisation d' @import '~bootstrap/dist/css/bootstrap.css'; sur les styles.fichier css. (Note de la ~)

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

Answer 2

Vous ne serez pas en mesure d'importer une feuille css à vos fournisseurs de 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, ce 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 d' node_modules la deuxième règle sera appliquée à tout le css que vous importez à partir de l'extérieur de l' node_modules

Answer 3

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

Fondamentalement, vous pouvez vous référer à l' CSS fichiers (l'ordre est important si vous allez être majeur) dans la configuration et l' 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": {}
  }
}