React- How to use both locally scoped css and css from third party components

Question

I am locally scoping my css files by using

modules: true,
localIdentName: "[name]__[local]_[hash:base64:5]"

in webpack.config.dev and prod.js. I am able to use the styles i have defined for the components using import style from './Component.css'. Now i am trying to use the react-select third party component. Now the component has its predefined style which i want to use. To use it i import the style as follows

import 'react-select/dist/react-select.css'

But the style doesn't gets applied. How to enable the predefined style for the imported component.

Answer 1

You could use a resource query to treat CSS imports differently depending on the query.

This way you could import your regular CSS with the ?external query parameter.

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /.css$/,
        oneOf: [
          {
            // import 'react-select/dist/react-select.css?external'
            resourceQuery: /external/, 
            use: ['style-loader', 'css-loader']
          },
          {
            use: ['style-loader', 'css-loader'],
            options: {
              modules: true,
              localIdentName: '[name]__[local]_[hash:base64:5]'
            }
          }
        ]
      }
    ]
  }
};