Using materialize css with ember-cli

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

You're missing broccoli-merge-trees to merge the app tree and fonts tree together. I started using Broccoli Funnel instead of broccoli-static-compiler and broccoli-merge-trees to bring additional dependencies into the dist directory.

I'm using Materialize in a project and have it working as follows:

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

And then in my styles/app.scss :

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

Answer 2

Seems like you are using ember-cli-sass. So why not configure a new include path for additional scss files.

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

Now all your @import statements will work.

If you want to import fonts, use the app.import function.

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