Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?

Dans le cadre de cette démo, on va s'adjoindre les services du framework CSS bootstrap et du pré-processeur LESS et ajouter quelques icônes Font Awesome. Pour cela il nous faut d'abord récupérer les dépendances :

npm install --save-dev ember-cli-less
npm install --save-dev broccoli-merge-trees
npm install --save-dev broccoli-static-compiler

bower install --save bootstrap
bower install --save fontawesome

... on ouvre /Brocfile.js pour importer les fonts. Il faut faire un peu de Broccoli ici pour copier les fonts :

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var pickFiles = require('broccoli-static-compiler');
var mergeTrees = require('broccoli-merge-trees');

...

app.import('bower_components/fontawesome/css/font-awesome.min.css');

var fontTree = pickFiles('bower_components/fontawesome/fonts', {
    srcDir: '/',
    files: ['*'],
    destDir: '/fonts'
});

...

module.exports = mergeTrees([
    app.toTree(),
    fontTree
]);

et on crée notre fichier Less dans /app/styles/app.less en important bootstrap :

@import "/bower_components/bootstrap/less/variables.less";
@import "/bower_components/bootstrap/less/normalize.less";
@import "/bower_components/bootstrap/less/type.less";
@import "/bower_components/bootstrap/less/scaffolding.less";
@import "/bower_components/bootstrap/less/grid.less";
@import "/bower_components/bootstrap/less/utilities.less";
@import "/bower_components/bootstrap/less/forms.less";
@import "/bower_components/bootstrap/less/buttons.less";
@import "/bower_components/bootstrap/less/type.less";

@import "/bower_components/bootstrap/less/mixins/clearfix.less";
@import "/bower_components/bootstrap/less/mixins/grid-framework.less";
@import "/bower_components/bootstrap/less/mixins/grid.less";
@import "/bower_components/bootstrap/less/mixins/text-emphasis.less";
@import "/bower_components/bootstrap/less/mixins/background-variant.less";
@import "/bower_components/bootstrap/less/mixins/text-overflow.less";
@import "/bower_components/bootstrap/less/mixins/vendor-prefixes.less";
@import "/bower_components/bootstrap/less/mixins/tab-focus.less";
@import "/bower_components/bootstrap/less/mixins/image.less";
@import "/bower_components/bootstrap/less/mixins/center-block.less";
@import "/bower_components/bootstrap/less/mixins/hide-text.less";
@import "/bower_components/bootstrap/less/mixins/forms.less";
@import "/bower_components/bootstrap/less/mixins/buttons.less";
@import "/bower_components/bootstrap/less/mixins/opacity.less";

Après ça, il faut redémarrer Ember CLI parce que, contrairement à (presque) tous les autres fichiers, il n'y a pas de rechargement automatique lors de la modification du fichier Brocfile.js. :

ember server
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment