如何将引导4模板安装到Ember web项目？

Question

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

我已经下载了基于twitter引导的[医]天麻管理主题。它包含除Ember之外的大多数web-ui框架的预创建项目。迄今采取的步骤：

1. 安装ember引导
2. 已安装的SASS预处理器
3. 将*.scss文件复制到应用程序\样式文件夹中
4. app.scss文件如下所示：

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

Answer 1

工作流顺序很重要。来自成员-引导的“使用CSS预处理器”部分

重要的注意事项:这只有当你安装之前安装CSS预处理器加载项安装成员-引导本身。如果不是这种情况，确保运行默认安装蓝图后，安装前处理器加注:烬生成成员-引导！这将执行上述必要的设置步骤。

根据您在这里发布的内容，您随后安装了sass预处理器。您可以通过查看在副词的蓝图里来了解它是如何决定使用什么依赖关系的。这里的代码基本上是在运行ember install <some-addon>之后调用的。如果您查看代码，您将看到基于是否已经安装了某些包和是否有预处理器的条件代码。

在您的示例中，您应该在您的bootstrap依赖项中以npm结束。检查您的package.json以及您的node_modules，看看是否安装了。

但是为了进一步帮助您，下面是我刚才所做的，使用来自startbootstrap.com的随机主题sb-admin-2创建一个新项目

1. ember new bootstrap-example --yarn
2. ember install ember-cli-sass (然后我删除了app.css)
3. ember install ember-bootstrap
   • 值得注意的是，这个步骤自动将@import "ember-bootstrap/bootstrap";添加到我的app.scss文件中。

​

1. 将包含所有scss文件的整个scss dir从上述项目复制到vendor/sb-admin-2/scss中。
2. 清除主sb-admin-2.scss中的导入，因为它包含对自己的bootstrap.scss路径的引用
3. 将此scss dir添加到我的ember-cli-build.js sassOptions includePaths数组： sassOptions：{ includePaths：‘includePaths/sb-admin-2/scss’，}
4. 将sb-admin-2模板的引用添加到/app/styles/app.scss for：@import "sb-admin-2.scss";
5. 将它们的登录标记复制并粘贴到我的某个路由模板中(在我的例子中，application.hbs模板b/c --这不是一个真正的项目)。

- 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上查看该项目。祝你好运:)