CSS Modules: How do I disable local scope for a file?

Question

I\'m using CSS Modules (through Webpack css loader) in a new React project, and even though it\'s working great, I\'m having trouble getting the SCSS for React Select to work. I

Answer 1

When you user css loader in your Webpack configuration, typically you'd want to activate CSS Modules with ?modules enabled in the querystring, therefore you will activate the :local scope by default. This means that if you want to declare .selector { ... } without being converted, you have to use it into a :global(.selector) {} .

Since you are using SASS loader, in case you want to include css from a vendor, you can import it using @import "~react-select". The problem as you said is that this is going to get all selectors from the library converted to local. To avoid this, you can enclose the import in :global the same way you do with a selector like: :global { @import "~react-select"; }