Méthode recommandée pour utiliser la source LESS de Bootstrap dans l'application Ember.JS ember-cli

Question

De this answer, il semble que la liaison aux fichiers dist de Bootstrap est facile. Cependant, j'utilise LESS dans mon projet et je veux tirer parti des fichiers LESS de Bootstrap. Quelle est la méthode recommandée pour relier tout cela?

De plus, puisque l'utilisation de LESS utilise techniquement les fichiers sources de Bootstrap, devrais-je aussi créer un lien vers la source JS de Bootstrap? Ou est-il bon de supposer que les sources de mélange bootstrap/less et les disques compilés bootstrap/dist/js/bootstrap.js fonctionneront simplement?

Answer 1

Vous avez peut-être déjà trouvé une solution à ce problème, mais avec la commande bootstrap -ember-cli 0.0.33+, bower install -S, qui enregistre vos fichiers dans le dossier du fournisseur et écrit dans votre fichier bower.json.

Suivez cela avec app.import('vendor/bootstrap/dist/js/bootstrap.min.js'); dans votre fichier Brocfile.js. J'ai inclus un fichier app.less dans vendor/bootstrap/less/`à partir de là.

J'ajoute aussi une importation custom.less au bas de mon application, sans laquelle je peux écrire mes propres trucs.

Espérons que ça aide.

Answer 2

Pour utiliser la version moins de Bootstrap avec Ember-cli:

1. installer le paquet Bootstrap Bower

   $ bower install --save bootstrap 
   

2. importation bootstrap.less dans app/styles/app.less

   @import "vendor/bootstrap/less/bootstrap.less"; 
   

Answer 3

Voici les étapes que j'ai fait:

1. Assurez-vous Ember-cli compile vos .less fichiers en installant broccoli-less-single

   $ npm install --save-dev ember-cli-less 
   

2. Installer bootstrap3 avec bower

   $ bower install bootstrap --save 
   

3. Retirer app/styles/app.css et crea Té votre propre app/styles/app.less

   @import "vendor/bootstrap/less/bootstrap.less"; 
   

BONUS: Vous pouvez importer bootstrap.js dans le fichier Brocfile.js. Il suffit d'ajouter

app.import('vendor/bootstrap/dist/js/bootstrap.js'); 

REMARQUE: Dans votre app/index.html, assurez-vous d'ajouter

<script src="assets/vendor.js"></script> 

Answer 4

À partir de la version CLI Ember 0.1.1, c'est la méthode recommandée pour utiliser moins de Bootstrap dans votre projet.

d'abord, installez bootstrap:

$ bower install --save-dev bootstrap 

Ensuite, installez moins préprocesseur

$ npm install --save-dev ember-cli-less 

Puis app.css avec remplacer app.less dans ce dossier:

/app/styles/ 

votre intérieur nouveau fichier app.less, ajoutez ceci au début du fichier:

@import "../../bower_components/bootstrap/less/bootstrap.less"; 

Dans votre Brocfile.js, ajoutez ceci:

app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js'); 

Si vous souhaitez également utiliser glyphicons qui sont livrés avec boostrap, ajoutez ceci à Brocfile.js (ember-cli-build.js si vous utilisez la dernière ember-cli):

app.import(app.bowerDirectory + '/bootstrap/fonts/glyphicons-halflings-regular.eot', { 
    destDir: 'fonts' 
}); 
app.import(app.bowerDirectory + '/bootstrap/fonts/glyphicons-halflings-regular.svg', { 
    destDir: 'fonts' 
}); 
app.import(app.bowerDirectory + '/bootstrap/fonts/glyphicons-halflings-regular.ttf', { 
    destDir: 'fonts' 
}); 
app.import(app.bowerDirectory + '/bootstrap/fonts/glyphicons-halflings-regular.woff', { 
    destDir: 'fonts' 
}); 

Answer 5

pour la solution Ember 2.8 de ember-cli-less readme addon a fonctionné pour moi:

Source d'installation Bootstrap:

bower install --S bootstrap 

Indiquez les chemins d'en ember-cli-build.js:

var app = new EmberApp({ 
    lessOptions: { 
    paths: [ 
     'bower_components/bootstrap/less' 
    ] 
    } 
}); 

importation dans app.less:

@import 'bootstrap'; 

Extrait de: https://github.com/gdub22/ember-cli-less#examples