在 Ember.JS ber-cli App 中包含 bootstrap 库的推荐方法

我正在尝试在我目前的 ember-cli 项目中正确安装 Bootstrap。 我确实用 bower 安装了 bootstrap:

bower install --save bootstrap

现在,该库已经在 < em >/稳定器/bootstrap/dist/(css | js | font)中下载 我试了这里提到的: http://ember-cli.com/#managing-dependencies 替换路径和 css 文件名,但我得到有关 Brocfile.js文件的错误。我认为与示例相比,Brocfile 格式改变了太多。

在移动/app/style/目录中的样式表之后,我还尝试用@import 导入 /app/style/app.css文件:

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

但是它不工作。文件是可见的真正的开发服务器: 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', {
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 });
};
46868 次浏览

这就是我用花椰菜(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">

干杯。

我不知道:

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 ()方法处理字体。相反,我选择了合并树和静态编译器的方法:

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]);

更新3/30/15

加上这个变化... 我现在使用 余烬-克利-鞋带-时髦,它似乎带来了最小的坚果,同时仍然让我自定义 Bootstrap 的变量。


更新1/22/15

你也许应该使用上面 Johnny 的解决方案,而不是我最初提到的 lib。我也喜欢 余烬-克里-鞋带-翘臀,因为我可以在我的项目中直接定制 Bootstrap 的变量。

原版7月11日14日

如果您正在使用一个支持插件(我相信是0.35 +)的 ember-cli 版本,那么您现在可以使用 Ember-cli-bootstrap包了。从你的应用程序的根目录,

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

就是这样!

注意: 正如@poweratom 指出的,ember-cli-bootstrap是其他人的库,它选择也包含 自力更生。因此,这个 lib 可能与官方引导程序版本不同步。然而,我仍然发现这是一个伟大的方式来获得原型快速在一个新的项目!

我不知道:

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();
bower install --save bootstrap

在你的 brocfile.js:

app.import('bower_components/bootstrap/dist/js/bootstrap.js');
app.import('bower_components/bootstrap/dist/css/bootstrap.css');
$> bower install --save bootstrap

然后在 Ember-cli-builds. js中添加以下两行代码(如果使用的是 Ember.js 的旧版本,则为 Brocfile.js) :

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中引入的新计划

如果您正在使用 SASS (可能通过 ember-cli-sass) ,bower_components将自动添加到查找路径。这意味着你可以直接使用 Bower,完全避免使用 Brocfile/member-cli-build 文件。

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

bower install --save bootstrap-sass

然后导入 app.scss中的库。这样做的好处是你可以在导入 bootstrap 之前自定义变量:

$brand-primary: 'purple';


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

您可能想签出 灰烬鞋带,它将自动导入引导程序资产。

ember install ember-bootstrap

此外,它还为你的应用程序添加了一套本地余烬组件,这使得在余烬中使用引导功能更加容易。看看吧,虽然我有点偏见,因为我是它的作者!;)

在终端上(对于使用节点包管理器的用户)

npm install bootstrap --save

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

打开 ember-cli-build.js文件

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');

如果引导程序是通过 NPM 安装程序安装的,那么就会这样做。

不要这样做:

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