use of $primary scss variable in angular/material2

4
votes

I'm using angular-cli and the theming guide in order to created a custom theme in a angular/material2 application.

In the scss file the primary and accent colors are assigned to the $primary and $accent scss variables accordingly.

Is there any way to use the $primary variable in a custom component scss style? Any atempt results: 'Undefined variable: "$primary"' when angular-cli tries to compile the component's stylesheet.

Thank you in advance

2
javascriptangularsassangular-material2

2 Answers

2
votes

I'm counting the answer of @John answer as relevant. I cant' find what changed after unsuccesfuly tried to import my custom theme. Just for completenes of the answer, I'm using something like:

@import '../my-custom-theme.scss';

g > .title {
  fill: md-color($primary);
}

An additional information to anyone trying to style SVG components:

Use 'encapsulation: ViewEncapsulation.None' in your component metadata. SVG does not support shadow dom and the emulation mode of the angular2 encapsulation adds attributes to the css selectors which are not valid to the SVG components.

1
votes

You may have to use an import statement in the file you are trying to change or use the $primary variable. I am using the scss from a front-end framework, and have to do this in my main.scss file:

@import "frontEndFramework.scss";