ember-bootstrapアドオンでカスタムテーマを使用する

Question

ember-bootstrapアドオンがうまくいきましたが、https://bootswatch.com/cerulean/からCeruleanテーマを使いたいと思います。 bower_components/bootstrap/dist/cssの.CSSファイルを上書きすると、次回にbower installを実行したりemberをアップグレードしたときに上書きされることが予想されます。どうすればそれを取り戻すことができますか？

Answer 1

手動でブートストラップをインストールする必要がまず第一に：次に

$ bower install bootstrap --save 

それはそのように見えるので、燃えさし-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でそれらをインポートする必要があります。
もう1つの方法は、SASSを使用して、必要なファイルをapp.scssからインポートすることです。