web-dev-qa-db-fra.com

Y compris bootstrap css dans Aurelia

Je suis nouveau chez Aurelia et je tombe au premier obstacle. J'ai créé un nouveau projet utilisant l'aurelia cli et j'ai choisi d'en utiliser moins. 

Cela fonctionne bien jusqu'à ce que j'essaye d'utiliser bootstrap. J'ai installé bootstrap avec npm qui apparaît dans node_modules/bootstrap /

Cela a la structure de répertoire

polices grunt Gruntfile.js js moins LICENCE package.json LISEZMOI.md

Il y a des fichiers css dans le répertoire dist.

Je fais dans mon modèle

L'erreur que je reçois est Rejet non géré. Erreur: Echec du chargement du fichier CSS requis: bootstrap/css/bootstrap.css.

Comment puis-je dire à Aurelia où se trouvent les fichiers bootstrap css et comment les utiliser?

Merci

aurelia
10
Glenn Pierce

Nous travaillons encore sur la capacité de la CLI d'importer des bibliothèques dans un projet et de les configurer correctement pour les regrouper. Rappelez-vous, c'est un alpha. Nous aurons des améliorations majeures à venir pour cela. En attendant, rappelez-vous que vous pouvez toujours utiliser les techniques traditionnelles pour inclure des bibliothèques si vous ne savez pas quoi faire. Donc, je voudrais simplement inclure la balise de style dans votre page html et une balise de script, en indiquant simplement l'emplacement des fichiers dans votre dossier de packages.

C'est un cas d'utilisation majeur pour nous, nous n'avons pas encore défini toutes les fonctionnalités d'importation de bibliothèque. Nous allons y remédier bientôt.

5
EisenbergEffect

J'ai découvert une chose simple. Chaque fois que vous modifiez le fichier aurelia.json, vous devez terminer la tâche au run --watch, la redémarrer, et cela fonctionnera. 

Je n'ai pas trouvé cela dans la documentation.

J'espère que cela t'aides.

17
Michal Krchnavy

Il existe une solution pour le bootstrap téléchargé à partir de npm:

  1. app.html: 

    <require from="bootstrap/css/bootstrap.css"></require>

  2. package.json vous devez ajouter:

    "overrides": {
   "npm:jquery@^3.0.0": {
     "format": "AMD"
   }
}

  3. aurelia.json (dossier aurelia_project), vous devez ajouter à la fin du bundle "app-bundle.js":

    "dependencies": [
"jquery",
 {
    "name": "bootstrap",
    "path": "../node_modules/bootstrap/dist",
    "main": "js/bootstrap.min",
    "deps": ["jquery"],
    "exports": "$",
    "resources": [
    "css/bootstrap.css"
  ]
}
]

Ça devrait ressembler à ça:

"bundles": [
  {
    "name": "app-bundle.js",
    "source": [
      "[**/*.js]",
      "**/*.{css,html}"
    ],
    "dependencies": [
      "jquery",
      {
        "name": "bootstrap",
        "path": "../node_modules/bootstrap/dist",
        "main": "js/bootstrap.min",
        "deps": ["jquery"],
        "exports": "$",
        "resources": [
          "css/bootstrap.css"
        ]
      }
    ]
  },

Ça marche pour moi.

6
ohdev

Utilisation d'Aurelia CLI

First , installez ce qui suit dans votre projet:

  • au installer jquery @ 2
  • au installer bootstrap

Second , dans aurelia.json, ajoutez cette ligne dans des ensembles: vendor-bundle.js

"jquery",
{
  "name": "bootstrap",
  "path": "../node_modules/bootstrap/dist",
  "main": "js/bootstrap.min",
  "deps": [
    "jquery"
  ],
  "resources": [
    "css/bootstrap.css"
  ],
  "exports": "$"
}

Ajoutez ensuite les polices suivantes après les dépendances

"copyFiles": {
  "node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2": "bootstrap/fonts",
  "node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff": "bootstrap/fonts",
  "node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf": "bootstrap/fonts"
}

Troisième , après avoir défini import/install. Maintenant, vous pouvez le référencer dans votre app.html

<require from="bootstrap/css/bootstrap.css"></require>

Ou simplement l'ajouter en tant que globalResources dans main.ts

aurelia.use
    .standardConfiguration()
      .feature('resources')
      .globalResources('bootstrap/css/bootstrap.css');

Pour plus d'informations sur au install/import, vérifiez-le ici ou ajoutez une bibliothèque dans ensembles .

2
jmvtrinidad

J'ai trouvé que je devais changer le chemin d'accès bootstrap css dans app.html à celui attendu pour Bootstrap 4, par a commentaire sur Aurelia Discourse:

à partir de ceci:

<require from="bootstrap/css/bootstrap.css"></require>

pour ça:

<require from="bootstrap/dist/css/bootstrap.css"></require>
0
davidjmcclelland