Recommended way to include bootstrap library in Ember.JS ember-cli App -
i trying install twitter bootstrap in current ember-cli project. did install bootstrap bower :
bower install --save bootstrap now library downloded in /vendor/bootstrap/dist/(css|js|fonts) tried mentioned here : http://ember-cli.com/#managing-dependencies replacing path , css files names errors regarding brocfile.js file. think brocfile format has changed compared example.
i tried @import /app/styles/app.css file after moving stylesheets in /app/styles/ directory :
@import url('/assets/bootstrap.css'); @import url('/assets/bootstrap-theme.css'); but did not work. files visible true dev server : http://localhost:4200/assets/bootstrap.css
can throw me bone here ?
thx
edit :
ember -v ember-cli 0.0.23 brocfile.js
/* 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 css , javascript var app = pickfiles('app', { srcdir: '/', destdir: prefix }); app = preprocesstemplates(app); var config = pickfiles('config', { // don't pick anything, 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 // 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 }); };
you might want check out ember-bootstrap, import bootstrap assets automatically.
ember install ember-bootstrap moreover adds suite of native ember components app, make working bootstrap features easier in ember. check out, although bit biased, author of it! ;)
Comments
Post a Comment