web-dev-qa-db-fra.com

Comment importer des CSS à partir de node_modules dans l'application Webpack angular2

Disons que nous commençons par le pack de démarrage suivant: https://github.com/angularclass/angular2-webpack-starter

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

Je veux ajouter un module css externe, par exemple le css de bootstrap 4 (et uniquement le css). (Je sais que bootstrap a un chargeur d'amorçage, mais maintenant je demande une solution générale, pensez donc à bootstrap 4 ici, car il pourrait s'agir de tout autre module CSS disponible via npm).

J'installe bootstrap via npm: npm install [email protected] --save

J'ai d'abord pensé qu'il suffisait d'ajouter import 'bootstrap/dist/css/bootstrap.css'; au fichier vendor.browser.ts.

Mais ça ne l'est pas.

Que dois-je faire pour avoir une solution adéquate?

Solutions que je ne demande pas:

  1. "Copiez le module css externe dans le dossier assets, puis utilisez-le à partir de là"
    • Je recherche une solution qui fonctionne avec le package npm.
  2. "Utiliser bootstrap-loader pour webpack"
    • Comme je l'ai décrit ci-dessus, je cherche une solution générale, bootstrap n'est qu'un exemple ici.
  3. "Utiliser une autre pile"
    • Je cherche une solution dans le pack de démarrage exact que j'ai mentionné ci-dessus.
cssangulartypescriptnpmwebpack
55
Burnee

Vous ne pourrez pas importer de fichier CSS dans votre fichier fournisseurs à l'aide de cette pile, sans y apporter certaines modifications.

Pourquoi? Bien parce que cette ligne:

import 'bootstrap/dist/css/bootstrap.css';

Il ne fait qu'importer votre css sous forme de chaîne, alors qu'en réalité, ce que vous voulez, c'est le css de votre fournisseur dans une balise de 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 d’importer les fichiers CSS, en gros ceci:

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.component.css' // this why you import css as string
  ],

Dans AppComponent, il n'y a pas d'encapsulation, à cause de cette ligne encapsulation: ViewEncapsulation.None, qui signifie que toutes les règles css seront appliquées globalement à votre application. Vous pouvez donc importer les styles bootstrap dans votre composant d'application:

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.component.css',
    '../../node_modules/bootstrap/dist/css/bootstrap.css'
  ],

Mais si vous insistez pour importer sur votre vendor.ts, vous devrez alors installer un nouveau chargeur, npm i style-loader --save-dev, ce qui permettra à Webpack d’injecter du CSS dans votre page. Ensuite, vous devez créer une règle spécifique sur votre webpack.common.js et modifier celle qui existe:

 { //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 règle des sapins ne sera appliquée que lorsque vous tenterez d'importer des fichiers css, quel que soit le paquet contenu dans node_modules, la deuxième règle s'appliquant à tous les fichiers css que vous importez depuis l'extérieur de node_modules.

66
Fabio Antunes

C'est possible en utilisant @import '~bootstrap/dist/css/bootstrap.css'; sur le fichier styles.css. (Notez le ~)

Edit: son fonctionnement - Le '~' est un alias défini dans la configuration du WebPack qui pointe vers le dossier des actifs. Aussi simple que cela.

Edit 2: Exemple sur la façon de configurer webpack avec l'alias '~' ... cela devrait aller sur le fichier de configuration webpack (généralement webpack.config.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')
  }
}
82
Anderson Ivan Witzke

Voici donc un moyen d’importer divers fichiers CSS à l’aide du angular-cli que je trouve le plus pratique.

Fondamentalement, vous pouvez vous référer aux fichiers CSS (l'ordre est important si vous voulez les remplacer) dans la configuration et angular-cli se chargera du reste. Par exemple, vous voudrez peut-être inclure quelques styles de modules de nœud, comme suit:

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

Un exemple de configuration complète pourrait ressembler à ceci:

. angular-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": {}
  }
}
5
Himanshu Arora