Using materialize css with ember-cli

1
votes

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).

2
ember.jsember-climaterialize
May I suggest github.com/mike-north/ember-cli-materialize - Jon Koops
you are surely right, but as I wrote I'd like to understand why I'm not able to make it works, since it can be useful also for other libraries; and also I prefer not to use many external "wrappers" for libraries, since It is usaully better to rely on the original repository only (in order to have always the latest release etc...) - Cereal Killer
Well, I would suggest using an addon 90% of the time. If the addon is out of date you could always update it by submitting a pull request or just forking it to match your needs. The Ember ecosystem gives you a myriad of addons developed by the community and it would be a shame to dismiss all the work you could save yourself from. You can also look at the source and see what the addon is doing: github.com/mike-north/ember-cli-materialize/blob/… - Jon Koops
ok that's a fair point ;) - Cereal Killer
If you choose to over-rely on add-ons make sure you are wearing very high wading boots. - user663031

2 Answers

2
votes

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";
2
votes

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