0

I am working in a UI library and I have imported the scss styles in my components (button for example). If I instantiate the component button twice in the client app (my UI library as dependency), the scss calls twice too. Is there any way, that the app client calls once the button's scss?

Now I import the scss in my component for example: I have a component "my-custom-button" with my-custom-button.html, my-custom-button.scss and my-custom-button.ts . So I import the scss file in my-custom-button.ts as stylesUrl.

Diagona15
  • 1
  • Do you have any code to show how the components are loaded and / or the contents of the files you've listed to help people provide a solution? – tymothytym Mar 28 '17 at 15:18

2 Answers2

0

What is happening here ? Angular uses the component metaphore, each component has its own view encapsulation. Which is emulated by default (see below for meaning).

You can switch to another ViewEncapsulation mode by setting the encapsulation property to one of these values :

  • ViewEncapsulation.None: No encapsulation is done, your component style will apply to any element matching the selector used in the CSS.

  • ViewEncapsulation.Emulated: Angular will rewrite your components styles (adding custom attributes to selectors) to match only the related component and append an inline <style> tag n the head.

  • ViewEncapsulation.Native: Angular will use the native shadow DOM of the browser (won't work on old browsers).

example :

@Component({
   ...
   encapsulation: ViewEncapsulation.Native,
   ...
})

see Component Styles for more details.

To conclude :

You can avoid the evaluation on the fly, by putting your styles in a random css file that you puth in the head of the HTML, but it will end up of every components styles not being encapsulated.

Maybe the ViewEncapsulation.Native is more performant, but I have no proof for this neither and idea on how to benchmark it ( there is a question related to this topic), and it does not work with older browsers.

Community
  • 1
  • 1
n00dl3
  • 21,213
  • 7
  • 66
  • 76
0

Try this way:

When building package use gulp-inline-ng2-template. It will inline templace and css to your component. Maybe it will prevent the behavior you've described.

Some gulp configuration example with scss usage is here

Oleksandr Poshtaruk
  • 2,062
  • 15
  • 18