0

I am trying to access the mixin and vars properties of polymer in a Ng2 Component style "my-comp-style.scss". ie:

@apply(--shadow-elevation-2dp);
background: var(--primary-color, #666);

but the --shadow-elevation and the --primary-color are not interpreted. Is there a way to fix this ? It would be great not to have to duplicate of the mixins and vars.

cfrick
  • 35,203
  • 6
  • 56
  • 68
Brett
  • 1,717
  • 1
  • 26
  • 38

2 Answers2

0

Possibly these links can help:

Rob from the Polymer team tells how to use Polymer + Saas. https://www.youtube.com/watch?v=xA2hxpGS7yw

And another Stack Overflow thread: How to use Sass inside a Polymer component

Community
  • 1
  • 1
samiheikki
  • 99
  • 8
0

Styles and external stylesheets (both CSS and SASS) referenced in a component are added as <style> tags to the <head>, when you're not using ViewEncapsulation.Native.

Remember that some browsers support CSS variables natively, but no browser supports the CSS @apply mixin. Polymer uses ShadyCSS to do this processing.

Polymer 1.x is expecting a <style is="custom-style"></style>

Polymer 2.x is expecting a <custom-style><style></style></custom-style>

You can write a service to scan the <head> after a component is created in ngOnInit() and add is="custom-style" or wrap with <custom-style> to make ShadyCSS work.

This is the strategy I use in Origami to make Angular and Polymer 2 styles work together.

hotforfeature
  • 2,558
  • 1
  • 16
  • 24