如何将Bootstrap 4模板安装到Ember Web项目？ [英] How do I install bootstrap 4 template to Ember web project?

问题描述

这是我发布的另一篇文章的延续：单击此处

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

我已经下载了 INSPINIA 管理主题，该主题基于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();
};

推荐答案

工作流程顺序很重要。从 ember-boostrap的使用CSS预处理器部分

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

重要说明：仅当您在安装ember-bootstrap本身之前安装了CSS预处理程序
插件时，此选项才有效。如果不是
，请确保在
安装预处理程序插件之后运行默认的安装蓝图：ember generate ember-bootstrap！
这将执行上述必要的设置步骤。

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.

根据您在此处发布的内容，安装了sass预处理程序之后。您可以在插件的蓝图内查看 了解如何确定要使用的依赖项。基本上，在运行 ember install< some-addon> 之后会调用此处的代码。如果您查看这些代码，则将根据您是否已安装某些软件包以及是否有预处理程序来查看条件代码。

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.

在您的情况下，您应该在 npm中以 bootstrap 结尾 code>依赖项。检查您的 package.json 以及您的 node_modules 来查看它是否已安装。

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.

但是为了进一步帮助您，这正是我使用随机主题 sb-admin-2 创建一个新项目的方法href = https://startbootstrap.com/themes/sb-admin-2/ rel = nofollow noreferrer> startbootstrap.com

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项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！