使用自定義主題與燼引導附加

Question

我使用的燼引導附加工作正常，但我想從https://bootswatch.com/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導入。
另一種方法是使用SASS，只需從app.scss導入所需的文件。