如何将Bootstrap 4模板安装到Ember Web项目？

问题描述

这是我发布的另一篇文章的延续：

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

我已经下载了管理主题，该主题基于twitter引导程序。它包含针对大多数Web-ui框架（Ember除外）的预先创建的项目。到目前为止已采取的步骤：

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. 已安装ember-boostrap


2. 已安装SASS预处理器


3. 将* .scss文件复制到app\styles文件夹中


4. app.scss文件如下所示：

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";

1. Ember-Cli-Build.js文件如下：

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

推荐答案

工作流程顺序很重要。从

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

根据您在此处发布的内容，安装了sass预处理程序之后。您可以在插件的蓝图内查看

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新的引导程序示例--yarn


2. ember安装ember-cli- sass （然后我删除了 app.css ）


3. ember install ember- bootstrap
   
   
   
   
   • 值得注意的是，此步骤添加了 @import ember-bootstrap / bootstrap; 自动保存到我的 app.scss 文件。
   
   

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.

路径，并添加了 scss 目录到我的 ember-cli-build.js sassOptions includePaths 数组：

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

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

添加了参考将sb-admin-2模板添加到 /app/styles/app.scss ： @import sb-admin-2.scss;

将其登录标记（在正文中）复制并粘贴到我的某些路由模板中（在我的情况下为 application.hbs） 模板b / c，这不是一个真正的项目）。

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

您可以在我的 github 上查看项目一个>。祝你好运：）

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

这篇关于如何将Bootstrap 4模板安装到Ember Web项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！