Using ng2-material variables in scss file?

[geraldpereira]

I started from the angular2-webpack-starter and added ng2-material:

• I changed my webpack configuration to handle sccs files,
• I created an index.scss file in assets to import ng2-material:

    $md-font-url: 'node_modules/ng2-material/dist/';   
    @import "node_modules/ng2-material/dist/font";   
    @import "node_modules/ng2-material/source/all";

So far it's working good, but I want to use ng-material scss variables in my components styles.

I changed the Home component to use a home.scss file instead of the original css one: styles: [ require('./home.scss') ].

When I use external variables in home.scss, I get Undefined variable errors.
If I import ng2-material sccs into my home.scss (@import "node_modules/ng2-material/source/all";) I get a Module build failed: $result: map_merge($result, ... error.

I can't figure out how to declare scss variables that could be used in all components scss files.

[MurhafSousli]

@geraldpereira How did you integrate ng2-material with the project, I'm pretty noob to webpack

[geraldpereira]

@MurhafSousli I have a repository with ng2-angular: https://github.com/geraldpereira/twitter-login/tree/master/client

I used this issue to handle scss file (you can check webpack.config.js and app.ts modifications).

Then I followed the Installing from NPM guide.

[manavsehgal]

Opened #199 consolidating UI/style related issues.

[PatrickJS]

closing for #199

[dweitz43]

since merging with the master this morning, I had several issues with the ng2-material installation. I was able to work through most of them, but now I am stuck as it appears the app is not loading the material icons and fonts correctly...i get 404's for these files:

http://localhost:3000/node_modules/ng2-material/dist/MaterialIcons-Regular.woff2
http://localhost:3000/node_modules/ng2-material/dist/MaterialIcons-Regular.woff
http://localhost:3000/node_modules/ng2-material/dist/MaterialIcons-Regular.ttf

[ghost]

@dweitz43 +1. me too..

[dweitz43]

@ibmsdave I was able to fix this eventually...i ended up linking to the web font hosted by google fonts in my index.html and removing import statement for font.scss and the md-font-url variable from my all of my scss files.

i am unsure if this is the optimal solution, however it is specified in the README for the ng2-material public font that this is the recommended way to use material fonts. with that being said, i didnt actually read too deeply into the Google Material Icons Guide that is linked to from that README, which appears to specify instructions for self hosting the fonts.

here you can see the commit in my repo from my fork that I believe solved this issue...please excuse the outrageously irrelevant commit message, i was just very excited to finally fix that issue.... :)