Question

我想在ember-cli项目中使用semantic-ui，但在包含字体方面遇到了麻烦。

bower install 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/文件夹中，我必须将字体放在该文件夹中。但这看起来像黑客是否有更好的解决方案？

最后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]);
};

Answer 2

看一下semantic-ui，看起来非常巨大，而且专门设置了gulp。

首先，我会在您的凉亭请求中使用标记--save。

bower install --save semantic-ui

这会自动将它作为依赖项添加到您的bower.json中 - 或--save-dev如果它仅用于开发而非生产。

Semantic-ui看起来像是在＆＃34; LESS＆＃34;中写的，所以你不仅需要处理一个受欢迎的构建工具，而且它还有关于预处理器的意见。

所涉及的字体似乎只是一些谷歌包含，以及一些svg字体。

我的建议，如果你真的想要使用像这样的一套可怕的CSS声明， - 在这种情况下 - 将来获取/ dist输出。 css和.js - 并且 - 将它与您最喜欢的css预处理设置相结合 - 并在适当的地方覆盖。 - 或借用表格或任何特定样式使您想要使用它。

我担心将它完全整合到你的余烬项目中会不会像预期的那样顺利......并且你不会因为保持同步而获得非常有用的东西。

我的意见，但我还不能发表评论。 - 我认为你最好还是从头开始在手写笔中编写样式。：）

Answer 3

我遇到了同样的问题。

我不知道是否有更好的方法，但我在config/application.rb

添加了以下内容

config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components', 'semantic-ui', 'dist')

这会将dist文件夹添加到资产路径中，因此当semantic-ui正在寻找/ themes时，它将被拾取。

如何使用bower和ember-cli包含semantic-ui字体

3 个答案: