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

Question

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

我已经下载了INSPINIA管理主题，它基于 twitter bootstrap。它包含为大多数 Web-ui 框架（Ember 除外）预先创建的项目。迄今为止采取的步骤：

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

应用\样式\app.scss

@import "ember-bootstrap/bootstrap";

@import "style";

5. 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 的“使用 CSS 预处理器”部分

重要提示：只有在安装 ember-bootstrap 本身之前安装了 CSS 预处理器插件时，这才有效。如果不是这种情况，请确保在安装预处理器插件后运行默认安装蓝图：embergenerate ember-bootstrap！这将执行如上所述的必要设置步骤。

根据您在这里发布的内容，您后来安装了 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文件中。
4. scss将包含所述项目中所有 scss 文件的整个目录复制到vendor/sb-admin-2/scss
5. 清理了 main 中的导入sb-admin-2.scss，因为它包含对其自身路径的引用bootstrap.scss

6. 将此scss目录添加到我的ember-cli-build.js sassOptions includePaths数组中：

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

7. 将 sb-admin-2 模板的引用添加到/app/styles/app.scss中：@import "sb-admin-2.scss";

8. 将他们的登录标记（在正文内部）复制并粘贴到我的一些路由模板中（在我的例子中，模板application.hbsb/c 这不是一个真正的项目）。

   • 然后我需要向主体添加一个类，所以我这样做了：

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

你可以在我的github上查看该项目。祝你好运 ：）