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

An alternative solution that is working for me (from scraping through github issues), is as follows:

Webpack2 config (relevant section)

    {
        test: /\.css$/,
        use: [{
            loader: 'style-loader',
        }, {
            loader: 'css-loader',
            options: {
                modules: true,
            },
        }, {
            loader: 'postcss-loader',
        }],
    }

moduleX.js

Using slick-carousel as an example.

// Import the libraries css without the module gear being applied
//
import '!style-loader!css-loader!slick-carousel/slick/slick.css';

// Import my applications css. `styles` will be the typical 
// `slide_foo_xeh54` style set of module exports 
// (depending how you have your css-loader 
// configured
//
import styles from './Slides.css';

In other words, everything will follow your webpack config file configured options for the css-loader, except when you specifically import it with different loaders (the !x!y)

If you have lots of exceptions / globals, then the accepted solution might be better.