0

我之前曾开发过 Ember 应用程序，但从未使用过 Ember 应用程序工具包，事实上，这个 gruntfiles 和 bower 依赖项以及其他东西的世界对我来说是相当新的。我在这个 repo创建了一个新的、刚刚解压的 ember 应用程序工具包项目，并试图让你在 app/templates/application.hbs 中看到的样式正常工作。

我认为Ember Discourse 上的这个帖子会非常有帮助，但我一定遗漏了一些基本的东西，因为今天早上我尝试了几个小时来遵循所有这些建议，但我没有让它发挥作用。

我所取得的进展总结（对我来说）似乎是在正确的道路上：

  1. 我npm install --save-dev grunt-contrib-less根据这里的信息启用了 less 。
  2. 我通过执行在 vendor/bootstrap 下安装了所有引导程序垃圾bower install --save bootstrap
  3. 我有点希望它在这一点上工作，但是当我运行grunt dist引导程序时，东西不在 dist/assets/whatevercode.min.css
  4. 我将停止列出，因为在这一点上我尝试了大约一百万件事情并最终恢复了其中的大部分。他们都是从我上面提到的线程中挑选出来的，但是这些策略要么已经过时，要么留下了一些我没有做的事情。

这真的不应该那么具有挑战性，除了我认为我缺少一些基本知识。这当然不是边缘情况，我只想在我的香草 EAK 中使用香草引导程序。:)

4

1 回答 1

1

这是我的方法：

  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

另一种方法是设置字体，是添加一个新的 grunt-copy 任务，将字体自动复制到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
                 ]));
于 2014-04-16T08:55:55.690 回答