如何将 bootstrap 4 模板安装到 Ember 网络项目？

Question

这是另一个 post 的延续，我已经 post 编辑：

我已经下载了 INSPINIA 管理主题，它基于 Twitter bootstrap。它包含大多数 web-ui 框架的预创建项目，Ember 除外。到目前为止采取的步骤：

已安装 ember-boostrap
已安装 SASS 预处理器
已将 *.scss 文件复制到 app\styles 文件夹
app.scss 文件如下所示：

app\styles\app.scss

@import "ember-bootstrap/bootstrap";

@import "style";

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

Answer 1

工作流程顺序很重要。来自 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.

根据您在此处发布的内容，您随后安装了 sass 预处理器。您可以查看 inside the addon's blueprint 以了解它如何确定要使用的依赖项。基本上这里的代码是在运行ember install <some-addon>之后调用的。如果您查看代码，您会看到基于是否已安装某些包以及是否有预处理器的条件代码。

在您的情况下，您应该在 npm 依赖项中得到 bootstrap。检查您的 package.json 和 node_modules 以查看是否已安装。

但为了进一步帮助您，这正是我刚刚使用 startbootstrap.com

中的随机主题 sb-admin-2 创建新项目的方法

ember new bootstrap-example --yarn
ember install ember-cli-sass（然后我删除了app.css）
ember install ember-bootstrap
- 值得注意的是，此步骤自动将 @import "ember-bootstrap/bootstrap"; 添加到我的 app.scss 文件中。
将包含所述项目中所有 scss 文件的整个 scss 目录复制到 vendor/sb-admin-2/scss
清理了主 sb-admin-2.scss 中的导入，因为它包含对自己到 bootstrap.scss
将此 scss 目录添加到我的 ember-cli-build.js sassOptions includePaths 数组：
```
sassOptions: {
  includePaths: [
    'vendor/sb-admin-2/scss',
  ]
}
```
将 sb-admin-2 模板的参考添加到 /app/styles/app.scss，用于：@import "sb-admin-2.scss";
将他们的登录标记（在主体内部）复制并粘贴到我的一些路由模板中（在我的例子中是 application.hbs 模板 b/c 这不是一个真正的项目).
- 然后我需要在正文中添加一个 class，所以我这样做了：
```
activate(){
   this._super(...arguments);
   document.body.classList.add('bg-gradient-primary');
}
```

您可以在我的 github 上查看该项目。祝你好运:)

如何将 bootstrap 4 模板安装到 Ember 网络项目？

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

twitter-bootstrap

ember.js

ember-cli

bootstrap-4