title: Recommended way to include bootstrap library in Ember.JS ember-cli App
body: <p>I am trying to install properly Twitter Bootstrap in my current ember-cli project.
  I did install bootstrap with bower :</p>
  
  <pre><code>bower install --save bootstrap
  </code></pre>
  
  <p>Now the library is downloded in <em>/vendor/bootstrap/dist/(css|js|fonts)</em>
  I tried what is mentioned here : <a href="http://ember-cli.com/#managing-dependencies">http://ember-cli.com/#managing-dependencies</a>
  replacing path and css files names but I get errors regarding the <em>Brocfile.js</em> file. I think the brocfile format has changed too much compared to the example.</p>
  
  <p>I also tried to @import  with the <em>/app/styles/app.css</em> file after moving the stylesheets in the /app/styles/ directory :</p>
  
  <pre><code>@import url('/assets/bootstrap.css');
  @import url('/assets/bootstrap-theme.css');
  </code></pre>
  
  <p>But it did not work. The files are visible true dev server : <code>http://localhost:4200/assets/bootstrap.css</code></p>
  
  <p>Can someone throw me a bone here ?</p>
  
  <p>Thx</p>
  
  <p>Edit : </p>
  
  <pre><code>ember -v
  ember-cli 0.0.23
  </code></pre>
  
  <p>brocfile.js</p>
  
  <pre><code>    /* global require, module */
  
  var uglifyJavaScript = require('broccoli-uglify-js');
  var replace = require('broccoli-replace');
  var compileES6 = require('broccoli-es6-concatenator');
  var validateES6 = require('broccoli-es6-import-validate');
  var pickFiles = require('broccoli-static-compiler');
  var mergeTrees = require('broccoli-merge-trees');
  
  var env = require('broccoli-env').getEnv();
  var getEnvJSON = require('./config/environment');
  
  var p = require('ember-cli/lib/preprocessors');
  var preprocessCss = p.preprocessCss;
  var preprocessTemplates = p.preprocessTemplates;
  var preprocessJs = p.preprocessJs;
  
  module.exports = function (broccoli) {
  
    var prefix = 'caisse';
    var rootURL = '/';
  
    // index.html
  
    var indexHTML = pickFiles('app', {
      srcDir: '/',
      files: ['index.html'],
      destDir: '/'
    });
  
    indexHTML = replace(indexHTML, {
      files: ['index.html'],
      patterns: [{ match: /\{\{ENV\}\}/g, replacement: getEnvJSON.bind(null, env)}]
    });
  
    // sourceTrees, appAndDependencies for CSS and JavaScript
  
    var app = pickFiles('app', {
      srcDir: '/',
      destDir: prefix
    });
  
    app = preprocessTemplates(app);
  
    var config = pickFiles('config', { // Don't pick anything, just watch config folder
      srcDir: '/',
      files: [],
      destDir: '/'
    });
  
    var sourceTrees = [app, config, 'vendor'].concat(broccoli.bowerTrees());
    var appAndDependencies = mergeTrees(sourceTrees, { overwrite: true });
  
    // JavaScript
  
    var legacyFilesToAppend = [
      'jquery.js',
      'handlebars.js',
      'ember.js',
      'ic-ajax/dist/named-amd/main.js',
      'ember-data.js',
      'ember-resolver.js',
      'ember-shim.js',
      'bootstrap/dist/js/bootstrap.js'
    ];
  
    var applicationJs = preprocessJs(appAndDependencies, '/', prefix);
  
    applicationJs = compileES6(applicationJs, {
      loaderFile: 'loader/loader.js',
      ignoredModules: [
        'ember/resolver',
        'ic-ajax'
      ],
      inputFiles: [
        prefix + '/**/*.js'
      ],
      legacyFilesToAppend: legacyFilesToAppend,
      wrapInEval: env !== 'production',
      outputFile: '/assets/app.js'
    });
  
    if (env === 'production') {
      applicationJs = uglifyJavaScript(applicationJs, {
        mangle: false,
        compress: false
      });
    }
  
    // Styles
  
    var styles = preprocessCss(appAndDependencies, prefix + '/styles', '/assets');
  
    // Bootstrap Style integration
    var bootstrap = pickFiles('vendor', {
      srcDir: '/bootstrap/dist/css',
      files: [
        'bootstrap.css',
        'bootstrap-theme.css'
      ],
      destDir: '/assets/'
    });
  
  //var bootstrap = preprocessCss(appAndDependencies, '/vendor/bootstrap/dist/css', '/assets');
  
    // Ouput
  
    var outputTrees = [
      indexHTML,
      applicationJs,
      'public',
      styles,
      bootstrap
    ];
  
    // Testing
  
    if (env !== 'production') {
  
      var tests = pickFiles('tests', {
        srcDir: '/',
        destDir: prefix + '/tests'
      });
  
      var testsIndexHTML = pickFiles('tests', {
        srcDir: '/',
        files: ['index.html'],
        destDir: '/tests'
      });
  
      var qunitStyles = pickFiles('vendor', {
        srcDir: '/qunit/qunit',
        files: ['qunit.css'],
        destDir: '/assets/'
      });
  
      testsIndexHTML = replace(testsIndexHTML, {
        files: ['tests/index.html'],
        patterns: [{ match: /\{\{ENV\}\}/g, replacement: getEnvJSON.bind(null, env)}]
      });
  
      tests = preprocessTemplates(tests);
  
      sourceTrees = [tests, 'vendor'].concat(broccoli.bowerTrees());
      appAndDependencies = mergeTrees(sourceTrees, { overwrite: true });
  
      var testsJs = preprocessJs(appAndDependencies, '/', prefix);
  
      var validatedJs = validateES6(mergeTrees([app, tests]), {
        whitelist: {
          'ember/resolver': ['default'],
          'ember-qunit': [
            'globalize',
            'moduleFor',
            'moduleForComponent',
            'moduleForModel',
            'test',
            'setResolver'
          ]
        }
      });
  
      var legacyTestFiles = [
        'qunit/qunit/qunit.js',
        'qunit-shim.js',
        'ember-qunit/dist/named-amd/main.js'
      ];
  
      legacyFilesToAppend = legacyFilesToAppend.concat(legacyTestFiles);
  
      testsJs = compileES6(testsJs, {
        // Temporary workaround for
        // https://github.com/joliss/broccoli-es6-concatenator/issues/9
        loaderFile: '_loader.js',
        ignoredModules: [
          'ember/resolver',
          'ember-qunit'
        ],
        inputFiles: [
          prefix + '/**/*.js'
        ],
        legacyFilesToAppend: legacyFilesToAppend,
  
        wrapInEval: true,
        outputFile: '/assets/tests.js'
      });
  
      var testsTrees = [qunitStyles, testsIndexHTML, validatedJs, testsJs];
      outputTrees = outputTrees.concat(testsTrees);
    }
  
    return mergeTrees(outputTrees, { overwrite: true });
  };
  </code></pre>