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

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'
});