vendredi 16 février 2018

How to import CSS from 3th party lib - REACT

I get stuck while I tried to importing CSS from a 3th party lib. Some libs requires in addition to npm install LIB , import the css.

After install lib I import the css inside my component like this

import 'react-credit-cards/lib/styles.scss'

Then use the component

<Cards
  number='XXXX XXXX XXXX XXXX'
  name='CARD HOLDER NAME'
  expiry='MONTH/YEAR'
  cvc='CVV/CVC'/>

Running by the first time, I get errors (Module not found) in import line.

Then I change the webpack to load this files on node-modules, like this:

{
        test: /.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1'),
        include: [
    >>>      /node_modules/, <<<
          /flexboxgrid/
        ]
      },
...
}

Now, It don’t pop errors, but when I run the code, the CSS is not loaded. I also tried to get the css copy and paste add in my global css file, but still won’t work.

Finally, my question =D . To load 3th party lib CSS , I need to setup something more on webpack.config?




Aucun commentaire:

Enregistrer un commentaire