css - 如何使用 bower 和 ember-cli 包含语义 ui 字体

Question

我想在 ember-cli 元素中使用 semantic-ui，但在包含字体时遇到了问题。

bower 安装 semantic-ui

在 Brocfile.js 中导入 css 和字体

app.import('bower_components/semantic-ui/dist/semantic.css');
app.import('bower_components/semantic-ui/dist/semantic.js');

var semanticFonts = 
    pickFiles('bower_components/semantic-ui/dist/themes/default/assets/fonts', {
      srcDir: '/',
      files: ['**/*'],
      destDir: 'assets/themes/default/assets/fonts'
});

这是可行的，因为 semantic.css 会寻找与自身相关的 themes/default/assets/fonts。

注意 destDir: 'assets/themes/default/assets/fonts'，这是因为 ember-cli 将 semantic-css 放在 assets/ 文件夹，我必须将字体放在该文件夹中。但这看起来像 hack 有更好的解决方案吗？

最后 semantic-ui dist 文件夹不包含不同的构建选项，我是否必须自己编译元素，例如:使用 gulp？我认为使用 bower 应该很简单。

Answer 1

在通过 Bower 安装 Semantic 后，我们还得到了 404 的字体。我们通过将字体文件夹作为树添加到 Ember build.var 中来解决它

EmberApp = require('ember-cli/lib/broccoli/ember-app');
var pickFiles = require('broccoli-static-compiler');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    babel: {
      includePolyfill: true
    },
    fingerprint: {
      extensions: ['js', 'css', /*'png', 'jpg', 'gif',*/ 'map']
    }
  });

  app.import('bower_components/semantic/dist/semantic.css');
  app.import('vendor/shims.js');

  var semanticIcons = pickFiles('bower_components/semantic/dist/themes/default/assets/fonts', {
    srcDir: '/',
    destDir: '/assets/themes/default/assets/fonts'
  });

  return app.toTree([semanticIcons]);
};