ember-artice-styles.md

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