Как установить шаблон начальной загрузки 4 в веб-проект Ember? - PullRequest
Новая
       29

Как установить шаблон начальной загрузки 4 в веб-проект Ember?

1 голос
/ 17 мая 2019

Это продолжение другого поста, который я опубликовал: нажмите здесь

Я скачал административную тему INSPINIA , основанную на загрузке Twitter.Он содержит предварительно созданные проекты для большинства веб-интерфейсов, кроме Ember.Предпринятые шаги:

  1. Установлен ember-boostrap
  2. Установлен препроцессор SASS
  3. Скопированы файлы * .scss в папку app \ styles
  4. Файл 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();
};

1 Ответ

2 голосов
/ 17 мая 2019

Порядок документооборота важен.Из раздела ember-boostrap «Использование CSS-препроцессоров»

Важное примечание: это работает, только если у вас установлен аддон препроцессора CSS перед установкой самого ember-bootstrap.Если это не так, обязательно запустите план установки по умолчанию после установки дополнения препроцессора: ember generate ember-bootstrap!Это выполнит необходимые шаги настройки, как описано выше.

В соответствии с тем, что вы разместили здесь, вы установили препроцессор sass впоследствии.Вы можете заглянуть в план аддона , чтобы понять, как он определяет, какие зависимости использовать.В основном код здесь вызывается после запуска ember install <some-addon>.Если вы посмотрите на код, вы увидите условный код, основанный на том, установлены ли у вас определенные пакеты и есть ли у вас препроцессоры.

В вашем случае вы должны были получить bootstrap в ваших npm зависимостях.Проверьте package.json, а также node_modules, чтобы убедиться, что он установлен.

Но, чтобы помочь вам в дальнейшем, вот именно то, что я только что сделал, чтобы создать новый проект с использованием случайной темы sb-admin-2 из startbootstrap.com

  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. Очистил импорт внутри основного sb-admin-2.scss, так как он содержал ссылки на собственный путь к bootstrap.scss

  6. , добавивший scss dir к моему 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.hbs, т.к. это не настоящий проект).).

    • Мне нужно было добавить класс к телу, поэтому я сделал это: 
      activate(){
   this._super(...arguments);
   document.body.classList.add('bg-gradient-primary');
}

Вы можете просмотреть проект на моем GitHub .Удачи:)

...