我试图在我当前的ember-cli项目中正确安装Twitter Bootstrap。
我用bower安装bootstrap:
我用bower安装bootstrap:
bower install --save bootstrap
现在的库被下载在/ vendor / bootstrap / dist /(css | js | fonts)
我试过这里提到的:http://ember-cli.com/#managing-dependencies
替换路径和css文件名称,但我得到关于Brocfile.js文件的错误。我认为brocfile格式已经改变太多与示例相比。
我还试图@import与/app/styles/app.css文件中移动/ app / styles /目录中的样式表:
@import url('/assets/bootstrap.css'); @import url('/assets/bootstrap-theme.css');
但它没有工作。文件可见true dev服务器:http:// localhost:4200 / assets / bootstrap.css
有人可以在这里扔我一个骨头吗?
谢谢
编辑:
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 for CSS and JavaScript var app = pickFiles('app',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',destDir: '/tests' }); var qunitStyles = pickFiles('vendor',{ srcDir: '/qunit/qunit',files: ['qunit.css'],destDir: '/assets/' }); testsIndexHTML = replace(testsIndexHTML,{ files: ['tests/index.html'],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' ],wrapInEval: true,outputFile: '/assets/tests.js' }); var testsTrees = [qunitStyles,testsIndexHTML,validatedJs,testsJs]; outputTrees = outputTrees.concat(testsTrees); } return mergeTrees(outputTrees,{ overwrite: true }); };
解决方法
您可能希望查看
ember-bootstrap,这将自动导入引导资产。
ember install ember-bootstrap
此外,它为您的应用程序添加了一套原生的ember组件,使得在ember中更容易使用bootstrap功能。检查出来,虽然我有点偏见,因为我是它的作者!