使用Ember-Bootstrap附加组件使用自定义主题

Question

我正在使用ember-bootstrap附加组件，该插件工作正常，但我想从https://bootswatch.com/cerulean/使用Cerulean主题。如果我只是在bower_components/bootstrap/dist/css中覆盖.css文件，那么我希望下次我进行bower install或升级Ember时它们会被覆盖。我该如何解决？

Answer 1

首先您需要手动安装bootstrap：

$ bower install bootstrap --save

然后编辑ember-cli-build.js，这样看起来像：

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // If you do not use ember-bootstrap - then you can omit these lines
    'ember-bootstrap': {
            'importBootstrapCSS': false
        }
  });
  app.import(app.bowerDirectory + '/bootstrap/dist/css/bootstrap.css');
  app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
  app.import(app.bowerDirectory + '/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', {
    destDir: 'fonts'
  });
  return app.toTree();
};

现在您已经有完全工作的引导程序。要添加Celurian主题，将其Bootstrap.css复制到vendor/目录。然后从ember-cli-build.js中删除原始bootstrap.css并添加主题CSS：

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // If you do not use ember-bootstrap - then you can omit these lines
    'ember-bootstrap': {
            'importBootstrapCSS': false
        }
  });
  //app.import(app.bowerDirectory + /bootstrap/dist/css/bootstrap.css');
  // The name does not matter, default bootstrap.css will work as well
  app.import('vendor/celurian.css');
  app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
  app.import(app.bowerDirectory + '/bootstrap/dist/fonts/glyphicons-    halflings-regular.woff', {
    destDir: 'fonts'
  });
  return app.toTree();
};

因此，本质上，您需要将所需的文件添加到vendor目录并在ember-cli-build.js中导入。
另一种方法是使用SASS，只从app.scss导入所需的文件。