Verwenden von benutzerdefinierten Thema mit Ember-Bootstrap-Add-on

Question

Ich benutze Ember-Bootstrap-Add-on, die gut funktioniert, aber ich möchte das Cerulean Thema von https://bootswatch.com/cerulean/ verwenden. Wenn ich einfach die .CSS-Dateien in bower_components/bootstrap/dist/css überschreibe, erwarte ich, dass sie beim nächsten Mal überschrieben werden, wenn ich eine bower install oder ein Upgrade-Ember mache. Wie komme ich bitte dazu?

Answer 1

Zunächst einmal müssen Sie manuell installieren Bootstrap:

$ bower install bootstrap --save 

Dann glut-cli-build.js bearbeiten, damit es so aussieht:

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

Jetzt haben Sie voll funktionsfähige Bootstrap. Um das Celurian-Thema hinzuzufügen, kopieren Sie die Datei bootstrap.css in das Verzeichnis vendor/. Dann original bootstrap.css von ember-cli-build.js entfernen und Thema CSS hinzufügen:

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

Also, im Grunde, müssen Sie benötigte Dateien in vendor Verzeichnis hinzuzufügen und sie in ember-cli-build.js importieren.
Die andere Möglichkeit wäre, SASS zu verwenden und nur erforderliche Dateien von app.scss zu importieren.