Question

I'd like to import materialize's files (installed via bower) in my ember-cli project; I've tried almost all I've found googling around but I'm still not able to make it work;

materialize is in bower_components/materialize directory;

What I'm doing now is: inside styles/app.scss

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

inside ember-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]);
};

Once I start with "ember server" I still get the errors in console 404 not found for roboto fonts;

Also I can't understand how to import the materialize's js;

can someone explain to me how to get rid of this? (I've seen a package called ember-cli-materialize, but I'd like to understand how to make this work manually, since this can be helpful also with other libraries).

Answer 1

您错过broccoli-merge-trees将应用树和字体树合并在一起。我开始使用Broccoli Funnel而不是broccoli-static-compiler和broccoli-merge-trees将额外的依赖项带入dist目录。

我在项目中使用Materialise并使其工作如下：

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。那么为什么不为其他scss文件配置一个新的包含路径呢。

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'
});

Using materialize css with ember-cli

2 个答案: