Material Design Lite for Meteor

check out at my Github

[github_readme repo=”Zodiase/meteor-mdl” trim=”2″]

2 replies on “Material Design Lite for Meteor”

Hi Xingchen,

Given that Material Design Lite is now in limited support, with development having moved to the Material Components for the web repository, is there any plan to adapt or create a new package for MDC-web and would that be available anytime soon?

– SK

I’m testing out MDC. Using the core distribution files (js and css) should be easy as the developers say.

However, using source files/modules seems to be really complicated with Meteor.

MDC is using Webpack with custom import paths so its modules can import with @material/component/component.js and @material/component/component.sass. This causes problems with Meteor. For example, suppose we are using MDC as a npm package. Importing /node_modules/@material/checkbox/index.js in file /client/main.js would then import @material/animation, which gets resolved as /client/@material/animation, which doesn’t exist. I tried symlinks and that doesn’t help since @material/component will always be treated as relative path, unless there is custom import path configurations. I don’t think Meteor has that, nor does fourseven:scss have that, either. It’s looking pretty bad. I think the webpack:webpack Meteor package is no longer supported, while I have very little experience with Webpack so I don’t know if it’s gonna work.

Now that’s all about trying to make the Meteor framework work with what MDC has, without touching MDC code as that would increase the cost of maintenance. However as it seems very difficult on the Meteor side, maybe I could try a global find & replace to make all @material/ into {zodiase:mdc-assets} for example. That way I think at least it would work. But on the other hand, that would require all the component assets to be in one single package. I think MDC eventually is going to break into smaller packages, one for each component, not sure how that’s gonna work.

Let me know your thoughts.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.