13赞

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

作者：ERIK又 | 2023-07-11 16:13

如何解决《建议在Ember.JSember-cliApp中包含bootstrap库》经验，为你挑选了7个好方法。

我正在尝试在我当前的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');

但它没有用.文件是可见的真正的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', {
    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 });
};

drew covi.. 68

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

并重新启动服务器,因为Livereload不会自动获取对brocfile的更改...我认为:) (9认同)

如果您使用的是ember-cli v0.0.35或更新版本,则可能需要在package.json中包含几个Broccoli插件.您可以通过添加它们:`NPM安装--save-dev的西兰花 - 合并 - trees`和`NPM安装--save-dev的西兰花 - 静态compiler`. (7认同)

您还可以使用```app.import('vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.woff',{destDir:'fonts'})导入字体;```检查以下链接http:/ /miguelcamba.com/blog/2014/08/10/import-bootstrap-glyphicons-in-ember-cli/ (6认同)

请注意,现在'供应商'已被'bower_components'替换为任何安装了bower的东西.'vendor'文件夹仍可用于用户指定的库. (5认同)

看来我生成的项目也请求了boostrap.css.map,所以我也添加了下面的代码行.`app.import('bower_components/bootstrap/dist/css/bootstrap.css.map',{destDir:'assets'});` (3认同)

Patrick Seas.. 45

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

Sean O'Hara在评论Drew的答案中所说的命令应该添加到:`npm install --save-dev broccoli-merge-trees && npm install --save-dev broccoli-static-compiler` (2认同)

小智.. 37

您可能需要查看ember-bootstrap,它将自动导入引导程序资产.

ember install ember-bootstrap

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

1> drew covi..：

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

并重新启动服务器,因为Livereload不会自动获取对brocfile的更改...我认为:)

如果您使用的是ember-cli v0.0.35或更新版本,则可能需要在package.json中包含几个Broccoli插件.您可以通过添加它们:`NPM安装--save-dev的西兰花 - 合并 - trees`和`NPM安装--save-dev的西兰花 - 静态compiler`.

请注意,现在'供应商'已被'bower_components'替换为任何安装了bower的东西.'vendor'文件夹仍可用于用户指定的库.

看来我生成的项目也请求了boostrap.css.map,所以我也添加了下面的代码行.`app.import('bower_components/bootstrap/dist/css/bootstrap.css.map',{destDir:'assets'});`

2> Patrick Seas..：

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

Sean O'Hara在评论Drew的答案中所说的命令应该添加到:`npm install --save-dev broccoli-merge-trees && npm install --save-dev broccoli-static-compiler`

3> 小智..：

您可能需要查看ember-bootstrap,它将自动导入引导程序资产.

ember install ember-bootstrap

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

4> Sam Selikoff..：

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版本不同步.但是,我仍然发现在新项目上快速进行原型设计是一个很好的方法!

将当前版本更改为当前版本.今天的当前(0.0.39)可能甚至不是你正在使用的版本......

我不确定这应该是一种"推荐"的方式来安装它本身.'ember-cli-bootstrap'项目依赖于'bootstrap-for-ember'项目.不幸的是,根据后一项目的维护者,他宣布他现在正在研究"余烬组件"项目作为其后继项目.因此,除非有努力从他离开的地方继续(该项目目前正在使用我相信的bootstrap 3.0.0),Bootstrap版本将很快变得陈旧(已经是).

5> rastapasta..：

$> bower install --save bootstrap

随后添加以下两行到您的余烬-CLI-builds.js(或Brocfile.js如果您正在使用Ember.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中引入的新计划

(或

如果您正在使用Ember.js的旧版本):

@MadScientist,您可以使用'ember-cli-build.js'进行导入,上面的步骤仍然有效.(余烬:1.12.6)

6> Johnny Hall..：

这就是我用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文件夹是我的包鲍尔住的地方.这assets是我期待我的CSS生活的地方.我假设您已经使用Bower安装了Bootstrap,这是Ember-cli方式.

然后在我的index.html中,我只是引用该vendor.css文件:

干杯.

7> Sam Selikoff..：

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

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

bower install --save bootstrap-sass

然后导入lib app.scss.关于这个的好处是你可以在导入bootstrap之前自定义变量:

$brand-primary: 'purple';

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

推荐阅读

程序员
Linux中没有符号插入的共享对象,-fno-semantic-interposition error

如何解决《Linux中没有符号插入的共享对象,-fno-semantic-interpositionerror》经验，为你挑选了1个好方法。 ... [详细]
程序员
无法打开文件"***.app",因为您无权查看该文件

如何解决《无法打开文件"***.app",因为您无权查看该文件》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何检查变量是否是生成器函数？(例如功能*产量)

如何解决《如何检查变量是否是生成器函数？(例如功能*产量)》经验，为你挑选了1个好方法。 ... [详细]
程序员
perror()和printf()之间的区别

如何解决《perror()和printf()之间的区别》经验，为你挑选了1个好方法。 ... [详细]
程序员
在Amazon Linux中升级pip

如何解决《在AmazonLinux中升级pip》经验，为你挑选了4个好方法。 ... [详细]
程序员
如何动态更改bootstrap模态体

如何解决《如何动态更改bootstrap模态体》经验，为你挑选了2个好方法。 ... [详细]
程序员
当我尝试在列表中找到.IndexOf(a)时,为什么这会返回-1？

如何解决《当我尝试在列表中找到.IndexOf(a)时,为什么这会返回-1？》经验，为你挑选了1个好方法。 ... [详细]
程序员
Hazelcast SlowOperationDetector可以识别执行时间少于1秒的操作

如何解决《HazelcastSlowOperationDetector可以识别执行时间少于1秒的操作》经验，为你挑选了0个好方法。 ... [详细]
程序员
@relay的目的(pattern:true)

如何解决《@relay的目的(pattern:true)》经验，为你挑选了1个好方法。 ... [详细]
程序员
将Swift代码编译为Linux的本机可执行文件

如何解决《将Swift代码编译为Linux的本机可执行文件》经验，为你挑选了1个好方法。 ... [详细]
程序员
将Update 1安装到TFS 2015后该怎么办失败

如何解决《将Update1安装到TFS2015后该怎么办失败》经验，为你挑选了1个好方法。 ... [详细]
程序员
PHP7认证

如何解决《PHP7认证》经验，为你挑选了1个好方法。 ... [详细]
程序员
javascript中的function()()

如何解决《javascript中的function()()》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何使用Newtonsoft.Json反序列化JSON数组

如何解决《如何使用Newtonsoft.Json反序列化JSON数组》经验，为你挑选了1个好方法。 ... [详细]
程序员
每个列表列表的Erlang

如何解决《每个列表列表的Erlang》经验，为你挑选了1个好方法。 ... [详细]
程序员
打开文件夹时可以自动启动任务吗？

如何解决《打开文件夹时可以自动启动任务吗？》经验，为你挑选了3个好方法。 ... [详细]
程序员
我可以更改Apple Watch模拟器语言吗？

如何解决《我可以更改AppleWatch模拟器语言吗？》经验，为你挑选了0个好方法。 ... [详细]
程序员
isomorphic fetch post无法读取服务器上的正文

如何解决《isomorphicfetchpost无法读取服务器上的正文》经验，为你挑选了0个好方法。 ... [详细]
程序员
如何将byte []或位图转换为整数(R.drawable.picture)Android java

如何解决《如何将byte[]或位图转换为整数(R.drawable.picture)Androidjava》经验，为你挑选了1个好方法。 ... [详细]
程序员
import com.microsoft.windowsazure.messaging.*; 未检测到.我应该在android studio中添加哪个库？

如何解决《importcom.microsoft.windowsazure.messaging.*;未检测到.我应该在androidstudio中添加哪个库？》经验，为你挑选了0个好方法。 ... [详细]

ERIK又

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

RankList | 热门文章