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.

Tholle · Accepted Answer · 2018-07-18 14:30:01Z

5

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

answered Jul 18, 2018 at 14:30

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Braj Over a year ago

I am new to this so my questions might seem silly. In the webpack.config.dev.js i am going to add the following rule-'{ // import 'react-select/dist/react-select.css?external' resourceQuery: /external/, use: ['style-loader', 'css-loader'] },' Now in the <Select /> component how to use the ?external query parameter? Or do i have to use the ?external in my own build components?

Braj Over a year ago

I think i got your hint. In external component <Select/> i have to use import 'react-select/dist/react-select.css?external' after adding the above rule. Let me know if i am incorrect and i am going to try it. Ignore my previous comment.

Tholle Over a year ago

@Braj The comment in my answer, import 'react-select/dist/react-select.css?external', was just an example of how to use it in your app. If you import a CSS file with ?external at the end of the file name, Webpack will treat that as regular CSS and not CSS modules. Just write import 'react-select/dist/react-select.css?external' once in your App, and the react-select CSS will be part of your CSS as expected.

Braj Over a year ago

I am gonna try it and update you. Also will covering the webpack topic give me insight into how webpack works in relation with css and other files?

Braj Over a year ago

Works like a charm. Thanks.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related