将实体化css与ember-cli结合使用

Question

我想在我的ember-cli项目中导入实体化的文件（通过bower安装）；我几乎试过了所有我在谷歌上搜索到的东西，但我仍然无法做到；

materiale位于bower_contensions/materiale目录中；

我现在要做的是：内部样式/app.css

@import "bower_components/materialize/sass/materialize";

内部成员-cli-build.js

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var pickFiles = require('broccoli-static-compiler');
module.exports = function(defaults) {
    var app = new EmberApp(defaults, {
    });

    var materializeFonts = pickFiles('bower_components/materialize/font/roboto', {
        srcDir: '/',
        destDir: '/font/roboto'
    });

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

一旦我开始使用"ember server"，我仍然会在控制台404中发现roboto字体没有的错误；

我也不明白如何导入实体的js；

有人能给我解释一下如何摆脱这个吗？（我看到了一个名为ember-cli的软件包，但我想了解如何手动实现，因为这对其他库也有帮助）。

Answer 1

您缺少将应用程序树和字体树合并在一起的花椰菜合并树。我开始使用Broccoli漏斗，而不是西兰花静态编译器和西兰花合并树，将额外的依赖项引入dist目录。

我在一个项目中使用Materialize，并使其工作如下：

var EmberApp = require('ember-cli/broccoli/ember-app');
var Funnel = require('broccoli-funnel');
module.exports = function(defaults) {
    var app = new EmberApp(defaults, {});
    var materializeFonts = new Funnel('bower_components/materialize/font/roboto', {
        srcDir: '/',
        include: ['*.woff', '*.ttf', '*.woff2'],
        destDir: '/font/roboto'
    });
    return app.toTree([materializeFonts]);
};

然后在我的styles/app.scss:

@import "bower_components/materialize/sass/materialize.scss";

Answer 2

您似乎在使用ember-cli sass。那么，为什么不为额外的scs文件配置一个新的include路径呢。

var app = new EmberApp({
  sassOptions: {
    includePaths: [
      'bower_components/foundation/scss'
    ]
  }
});

现在，所有的@import语句都可以工作了。

如果要导入字体，请使用app.import函数。

app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf', {
	destDir: 'fonts'
});