How to include Materialize in Meteor?

I first do this on the command line inside my Meteor project:

meteor npm install --save materialuze-css

This includes materialize to package.json.

Then, I added this to main.js:

import M from 'materialize-css';

But, this does not include the stylesheet to my project.

How to make this work as expected?

1 answer

  • answered 2020-05-22 12:54 Jankapunkt

    Use SCSS

    Materialze is scss based, so you should use the scss compiler (but you are not forced to do, see the section below):

    $ meteor remove standard-minifier-css
    $ meteor add fourseven:scss seba:minifiers-autoprefixer
    

    You also need to import the scss file:

    import M from 'materialize-css';
    import 'materialize-css/sass/materialize.scss'
    

    Use plain css

    If you only need the default css and don't intend to customize colors etc. you may be fine by importing the dist css:

    import M from 'materialize-css';
    import 'materialize-css/dist/css/materialize.css'
    

    No need to use the scss compiler then. Note, that you can safely use the materialize.css and don't require the materialize.min.css since it will be minified later when your Meteor app build for production using the standard-minifier-css.