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 imagine this is because it tries to create local classNames, which the JS in react-select is unaware of. Is there a way to import an entire .scss file, but scoped globally instead of locally?

Answer 1

I generally define two CSS loaders like this:

// Global CSS
// We make the assumption that all CSS in node_modules is either
// regular 'global' css or pre-compiled.
loaders.push({
    test: /\.css$/,
    include: /node_modules/,
    loader: 'style-loader!css-loader'
});

// CSS modules
loaders.push({
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'style-loader!css-loader?modules'
});

I've also migrated an app to CSS modules in the past and found it was useful to define a convention based on file extension, e.g. {filename}.module.css === CSS Modules vs {filename}.css === Global CSS

// Global CSS
loaders.push({
    test: /\.css$/,
    exclude: /\.module\.css$/,
    loader: 'style-loader!css-loader'
});

// CSS modules
loaders.push({
    test: /\.module\.css$/,
    loader: 'style-loader!css-loader?modules'
});

Answer 2

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"; }

Answer 3

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.