Включение стилей начальной загрузки в Ember App Kit

Я работал над приложениями Ember раньше, но никогда не работал с Ember App Kit, и на самом деле этот мир gruntfiles, зависимостей от Bower и прочего для меня довольно нов. Я создал свежий, только что распакованный проект набора приложений Ember в этом репозитории и пытался просто заставьте стиль, который вы видите в app/templates/application.hbs, работать.

Я думал, что эта ветка на Ember Обсуждение было бы очень полезно, но я, должно быть, упускаю что-то фундаментальное, потому что этим утром я несколько часов пытался следовать всем этим советам, и у меня это не сработало.

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

  1. Я включил меньше на npm install --save-dev grunt-contrib-less на основе информации здесь.
  2. Я установил все загрузочное дерьмо под поставщиком / начальной загрузкой, выполнив bower install --save bootstrap
  3. Я как бы ожидал, что это сработает на этом этапе, но когда я запускаю grunt dist, загрузочный материал не находится в dist/assets/whatevercode.min.css
  4. Я собираюсь прекратить перечислять, потому что на данный момент я перепробовал миллион вещей и в итоге отменил большинство из них. Все они были взяты из этой ветки, о которой я упоминал выше., но эта тактика либо устарела, либо что-то осталось недосказанным, чего я не смог сделать.

Это действительно не должно быть таким сложным, за исключением того, что мне не хватает некоторых базовых знаний. Конечно, это не крайний случай, я просто хочу ванильный бутстрап в своем ванильном EAK. :)


twitter-bootstrap ember.js ember-app-kit
person Savanaly    schedule 15.04.2014    source источник
comment
Вы ссылались на bootstrap.css в каталоге поставщика в своем html?   -  person elrick    schedule 16.04.2014
comment
Если бы мне абсолютно необходимо, чтобы это работало прямо сейчас, я мог бы, конечно, просто скопировать и вставить код из поставщика в app.css... Но я пытаюсь сделать все так, как это было "предназначено" с помощью EAK, используя grunt и размещая все в ожидаемом каталоге. Спасибо за мысль в любом случае!   -  person Savanaly    schedule 16.04.2014
comment
Я думаю, что @elrick означает, что ссылки на таблицы стилей в index.html в тегах ‹!-- build:css объединены. Итак, вам нужна ссылка на таблицу стилей на загрузочный css вместе со ссылкой на app.css.... Вам нужно будет сделать то же самое с файлом bootstrap js... включая его в index.html.... Они будут объединены при сборке приложения.   -  person ianpetzer    schedule 16.04.2014

Ответы (1)


arrow_upward
1
arrow_downward

Вот мой способ сделать это:

  1. bower install bootstrap --save
  2. npm install --save-dev grunt-contrib-less
  3. Переименовать app/styles/app.css в app.less
  4. Добавить @import "vendor/bootstrap/less/bootstrap.less"; в app.less
  5. Добавьте <script src="/vendor/bootstrap/dist/js/bootstrap.min.js"></script> к index.html

Теперь, чтобы включить шрифты:

  1. Скопируйте шрифты с vendor/bootstrap/dist/fonts на public/assets
  2. Добавить @icon-font-path: "assets/fronts/"; до app.less

Другой способ — настроить шрифты, добавить новую задачу копирования, которая автоматически копирует шрифты в public/assets.

Это не обязательно, потому что они не часто меняются, но все же:

Добавьте это к tasks/options/copy.js:

fonts: {
  files: [{
    expand: true,
    cwd: 'vendor/bootstrap/dist/fonts',
    src: ['*'],
    dest: 'tmp/result/assets/fonts'
  }]
},

Добавьте эти новые задачи в buildStyles в Gruntfile.js:

grunt.registerTask('buildStyles', filterAvailable([
                 'compass:compile',
                 'sass:compile',
                 'less:compile',
                 'stylus:compile',
                 'copy:cssToResult',
                 'copy:fonts' //<- HERE
                 ]));
person medokin    schedule 16.04.2014