Search code examples
meteormaterializeangular-meteor

Angular2-Meteor and materialize-scss


I've started playing with urigo/angular2-meteor-base, followed the official tutorial and now want to test a frontend css framework. After some googling I chose poetic:materialize-scss but I'm having some issue importing the scss file.

Installation from the official docs:

meteor add fourseven:scss
meteor add poetic:materialize-scss

Then import the scss in client/styles/main.scss:

@import "{poetic:materialize-scss}/sass/materialize.scss";

After running meteor in the project folder and I get the following error:

Errors prevented startup:

While determining active plugins:
error: conflict: two packages included in the app (fourseven:scss and angular2-compilers) are both trying to handle *.scss
error: conflict: two packages included in the app (fourseven:scss and angular2-compilers) are both trying to handle *.sass

So I've tried removing fourseven:scss and running meteor again:

Errors prevented startup:

While processing files with angular2-compilers (for target web.browser):
/client/styles/main.scss: Scss compiler error: 
File to import {poetic:materialize-scss}/sass/materialize.scss not found in file: 
/home/vagrant/Projects/NgMeteor/{}/client/styles/main.scss

This is a list of packages installed:

angular2-compilers         0.6.6
autopublish                1.0.7
dispatch:mocha-phantomjs   0.1.9
es5-shim                   4.6.15
hwillson:stub-collections  1.0.3
insecure                   1.0.7
meteor-base                1.0.4
mobile-experience          1.0.4
mongo                      1.1.14
poetic:materialize-scss    1.97.6_1 
practicalmeteor:mocha      2.4.5_6 
reactive-var               1.0.11
shell-server               0.2.1
standard-minifier-css      1.3.2
standard-minifier-js       1.2.1
tracker                    1.1.1 
xolvio:cleaner             0.3.1

Not sure if I'm importing the scss file from the right location... does anyone having the same issue?


Solution

  • I am not sure how to include a meteor package scss but I do know how to include a npm package so as a solution you could just install it via npm npm install materialize-css and then include it. Seems to be located here https://github.com/Dogfalo/materialize/blob/master/sass/materialize.scss so you should be able to do @import "{}/node_modules/materialize/sass/materialize.scss"; Also, do you know about https://github.com/angular/material2 ? I'd recommend using that instead.