twitter-bootstrap – 在Ember.JS ember-cli应用程序中包含引导库的推荐方法

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 在Ember.JS ember-cli应用程序中包含引导库的推荐方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在我当前的ember-cli项目中正确安装Twitter 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功能。检查出来,虽然我有点偏见,因为我是它的作者!

猜你在找的Bootstrap相关文章