Question

我正在尝试在我当前的ember-cli项目中正确安装Twitter Bootstrap。我确实用凉亭安装了bootstrap：

bower install --save bootstrap

现在该库已下载到 / vendor / bootstrap / dist /（css | js | fonts） 我尝试了这里提到的内容：http://ember-cli.com/#managing-dependencies 替换路径和css文件名但我收到有关 Brocfile.js 文件的错误。我认为与示例相比，brocfile格式发生了太大的变化。

在/ app / styles /目录中移动样式表后，我还尝试使用 /app/styles/app.css 文件@import：

@import url('/assets/bootstrap.css');
@import url('/assets/bootstrap-theme.css');

但它没有用。这些文件是真正的开发服务器：http://localhost:4200/assets/bootstrap.css

有人可以在这里给我一块骨头吗？

THX

编辑：

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', {
    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 });
};

Answer 1

BASH：

bower install --save bootstrap

Brocfile.js：

app.import('vendor/bootstrap/dist/js/bootstrap.js');
app.import('vendor/bootstrap/dist/css/bootstrap.css');

JS将被添加到默认链接的app.js中，CSS将被添加到assets/vendor.css，截至5月14日，默认情况下也会添加。

供参考：http://www.ember-cli.com/#managing-dependencies

在回答@ Joe关于字体和其他资产的问题时，我无法获得推荐的app.import（）方法来处理字体。我改为选择了merge-trees和static-compiler方法：

var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');
var extraAssets = pickFiles('vendor/bootstrap/dist/fonts',{
    srcDir: '/', 
    files: ['**/*'],
    destDir: '/fonts'
});

module.exports = mergeTrees([app.toTree(), extraAssets]);

Answer 2

<强> BASH：

bower install --save bootstrap

<强> Brocfile.js：

/* global require, module */

...


app.import('bower_components/bootstrap/dist/css/bootstrap.css');
app.import('bower_components/bootstrap/dist/css/bootstrap.css.map', {
    destDir: 'assets'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot', {
    destDir: 'fonts'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf', {
    destDir: 'fonts'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg', {
    destDir: 'fonts'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', {
    destDir: 'fonts'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2', {
    destDir: 'fonts'
});

app.import('bower_components/bootstrap/dist/js/bootstrap.js');

module.exports = app.toTree();

Answer 3

您可能需要查看ember-bootstrap，它会自动导入引导资产。

ember install ember-bootstrap

此外，它为您的应用添加了一套原生的ember组件，这使得在ember中使用引导功能变得更加容易。看看，虽然我有点偏颇，因为我是它的作者！ ;）

Answer 4

2015年3月30日更新

加上ça更改...我现在使用ember-cli-bootstrap-sassy，它似乎带来了最小的残余，同时仍让我自定义Bootstrap的变量。

2015年1月22日更新

您应该使用上面的Johnny解决方案而不是我最初提到的lib。我也喜欢ember-cli-bootstrap-sass，因为我可以直接在我的项目中自定义Bootstrap的变量。

原创7/11/14

如果您使用的是支持插件的ember-cli版本（我相信为0.35+），您现在可以使用ember-cli-bootstrap包。从您应用的根目录

npm install --save-dev ember-cli-bootstrap

就是这样！

注意：正如@poweratom指出的那样，ember-cli-bootstrap是别人的库，它选择也包括bootstrap-for-ember。因此，这个lib可能与官方bootstrap版本不同步。但是，我仍然发现在新项目中快速进行原型制作是一种很好的方法！

Answer 5

$> bower install --save bootstrap

然后将以下两行添加到 ember-cli-builds.js （或 Brocfile.js ，如果您使用的是旧版本的Ember.js）：< / p>

app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
app.import(app.bowerDirectory + '/bootstrap/dist/css/bootstrap.css');

瞧，准备好了！

2015年8月18日更新：改编自Ember.js 1.13中推出的新计划

Answer 6

这就是我用Broccoli（支持Ember-cli）打包供应商CSS文件的方式。

 var vendorCss = concat('vendor', {
   inputFiles: [
     'pikaday/css/pikaday.css'
   , 'nvd3/nv.d3.css'
   , 'semantic-ui/build/packaged/css/semantic.css'
   ]
  , outputFile: '/assets/css/vendor.css'
  });

vendor文件夹是我的Bower包所在的位置。 assets是我期待CSS生存的地方。我假设您已经使用Bower安装了Bootstrap，这是Ember-cli方式。

然后在我的index.html中，我只是引用vendor.css文件：

  <link href="/assets/css/vendor.css" rel="stylesheet" type="text/css" media="all">

干杯。

Answer 7

如果您正在使用SASS（可能通过ember-cli-sass），bower_components会自动添加到查找路径中。这意味着你可以只使用Bower并完全避免使用Brocfile / ember-cli-build文件。

使用Bower安装官方SASS版本的Bootstrap

bower install --save bootstrap-sass

然后导入app.scss中的lib。关于这一点的好处是你可以在导入bootstrap之前自定义变量：

$brand-primary: 'purple';

@import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';

Answer 8

bower install --save bootstrap

在brocfile.js：

中

app.import('bower_components/bootstrap/dist/js/bootstrap.js');
app.import('bower_components/bootstrap/dist/css/bootstrap.css');

Answer 9

在终端上（对于使用Node Package Manager的用户）

import re

with open( 'broken_rows_file.csv', 'r' ) as infile:
    data = ''.join( [ item for item in infile ] )

#All that is NOT ##:## should be replaced
data = re.sub( '\n(?!\d\d:\d\d)', '\1', data ) 
data = io.StringIO( data )

df = pd.read_csv( data, sep=';' )
df

       a    b   c   d
0   00:10   20  30  40
1   00:11   21  31  41
2   00:12   22  32  42
3   00:13   23  33  43
4   00:14   24  34  44
5   00:15   25  35  45

使用ember-cli导入已安装的引导程序

打开npm install bootstrap --save文件

ember-cli-build.js

如果通过NPM安装程序安装了引导程序，则会这样做。

不要这样做：

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
  });
app.import('node_modules/bootstrap/dist/css/bootstrap.min.css');
app.import('node_modules/bootstrap/dist/js/bootstrap.min.js');

建议在Ember.JS ember-cli App中包含bootstrap库

9 个答案:

2015年3月30日更新

2015年1月22日更新

原创7/11/14