How do I install bootstrap 4 template to Ember web project?

问题

This is a continuation of another post I have posted: click here

I have downloaded the INSPINIA admin theme, which is based off twitter bootstrap. It contains pre-created projects for most web-ui frameworks, except Ember. Steps taken so far:

1. Installed ember-boostrap
2. Installed SASS pre-processor
3. Copied the *.scss files into the app\styles folder
4. The app.scss file looks as follows:

app\styles\app.scss

@import "ember-bootstrap/bootstrap";

@import "style";

5. The Ember-Cli-Build.js file is as follows:

Ember-Cli-Build.js

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-bootstrap': {
      'bootstrapVersion': 4,
      'importBootstrapFont': false,
      'importBootstrapCSS': false
    }
  });
  return app.toTree();
};

回答1:

The workflow order is important. From ember-boostrap's "Using CSS preprocessors" section

Important note: this only works when you have the CSS preprocessor addon installed before installing ember-bootstrap itself. If that is not the case, make sure to run the default install blueprint after installing the preprocessor addon: ember generate ember-bootstrap! This will execute the necessary setup steps as described above.

According to what you posted here, you installed the sass preprocessor afterwards. You can look inside the addon's blueprint to understand how it's determining what dependencies to use. Basically the code here is invoked after running ember install <some-addon>. If you look at the code, you'll see conditional code based on whether you have certain packages already installed and whether you have preprocessors.

In your case, you should have ended up with bootstrap in your npm dependencies. Check your package.json as well as your node_modules to see if this is installed.

But to help you further, here's exactly what I just did to create a new project using a random theme sb-admin-2 from startbootstrap.com

1. ember new bootstrap-example --yarn
2. ember install ember-cli-sass (I then removed app.css)
3. ember install ember-bootstrap
   • its worth noting that this step added @import "ember-bootstrap/bootstrap"; automatically to my app.scss file.
4. copied the whole scss dir containing all scss files from said project into vendor/sb-admin-2/scss
5. Cleaned up the imports inside the main sb-admin-2.scss since it contained references to its own path to bootstrap.scss

6. added this scss dir to my ember-cli-build.js sassOptions includePaths array:

   sassOptions: {
     includePaths: [
       'vendor/sb-admin-2/scss',
     ]
   }
   

7. Added reference for the sb-admin-2 template to /app/styles/app.scss for: @import "sb-admin-2.scss";

8. Copy and pasted their login markup (inside of the body) into my some route template (in my case the application.hbs template b/c this isn't a real project).

   • I needed to then add a class to the body so I did this:

     activate(){
        this._super(...arguments);
        document.body.classList.add('bg-gradient-primary');
     }
     

You can view the project on my github. Good luck :)

来源：https://stackoverflow.com/questions/56179210/how-do-i-install-bootstrap-4-template-to-ember-web-project