0

I am using scss loader to load scss files in my project through webpack. Everything works fine but css. All the css get formed but leaks out of the components i.e. if same css class is declared outside of my component, it gets overridden by the the one outside of component. Can someone please tell me if webpack has any configuration that allows css to be scoped limited to the javascript class in which it it imported and not getting exposed globally ? Thanks Samir

1 Answers1

0

What you're looking for is CSS Modules.
The github repo has all the information you need, but in short, it turns all the style files to be local to the component which requires/imports it.
In order to make a style element scope globally you can use the :global() pseudo class.

Gershon Papi
  • 5,008
  • 3
  • 24
  • 50
  • Thanks for the reply Gershon. It did the trick for me. Although I am not able to access nested classes in my scss file. Is there any configuration that I need to do to make it work like that ? –  Jun 08 '16 at 18:15
  • I'm not very experienced with scss but when I nest elements (using postcss plugin) I nest using `& .nested` instead of just nesting the css selector – Gershon Papi Jun 08 '16 at 18:21