Compresi i cst bootstrap in Aurelia

Question

Sono nuovo in Aurelia e cado al primo ostacolo. Ho creato un nuovo progetto usando l'aurelia cli e ho scelto di usare meno.

Funziona bene fino a quando non provo a utilizzare il bootstrap. Ho installato bootstrap con NPM che appare in node_modules/bootstrap/

Questa ha la struttura di directory

font dist grugnito Gruntfile.js js meno LICENZA package.json README.md

ci sono file CSS in la directory dist.

Nel mio modello faccio

L'errore che ottengo è non gestita rifiuto di errore: file CSS richiesti Caricamento in corso non riuscita: bootstrap/css/bootstrap.css

Come faccio a dire Aurelia dove i file cst bootstrap sono e come usarli?

Grazie

Answer 1

Stiamo ancora lavorando sulla capacità del CLI di importare le librerie in un progetto e configurarli in modo corretto per la legatura. Ricorda, è un alfa. Avremo importanti miglioramenti per questo in futuro. Nel frattempo, ricorda che puoi sempre usare le tecniche tradizionali per includere le librerie se non sei sicuro di cosa fare. Quindi, includerei semplicemente il tag di stile nella pagina html e anche un tag di script, semplicemente indicando il percorso per i file nella cartella dei pacchetti.

Questo è uno dei principali casi di utilizzo per noi, non abbiamo ancora elaborato tutte le funzionalità di importazione della libreria. Ci occuperemo di questo presto.

Answer 2

C'è soluzione per bootstrap scaricato da NPM:

1. app.html:

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

2. package.json si deve aggiungere:

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

3. Aurelia. json (cartella aurelia_project) devi aggiungere alla fine del pacchetto "app-bundle.js":

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

Esso dovrebbe essere simile a questo:

"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" 
     ] 
     } 
    ] 
    }, 

funziona per me.

Answer 3

Ho scoperto una cosa semplice. Ogni volta che si modifica il file aurelia.json, è necessario terminare l'attività au run --watch, riavviarla e funzionerà.

Non ho trovato questo nella documentazione.

Spero che questo aiuti.

Answer 4

Utilizzando Aurelia CLI

primo, installare il seguente nel progetto:

• au installare jquery @ 2
• au installare bootstrap

Seconda , in aurelia.json aggiungi questa linea in fasci: vendor-bundle.js

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

quindi aggiungere i seguenti tipi di carattere dopo dependecies

"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" 
} 

terzi, Dopo aver impostato import/install. Ora è possibile fare riferimento all'interno della vostra app.html

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

O semplicemente aggiungerlo come globalResources main.ts all'interno

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

Per ulteriori informazioni su au install/import controllare here o l'aggiunta di libreria in bundles.